<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
$('.longtext').each(function() {
if ($(this).attr('scrollWidth') > $(this).width()) {
$more = $('<b class="more">&hellip;</b>');

// add it to the dom first, so it will have dimensions
$(this).append($more);

// now set the position
$more.css({
top: '-' + $(this).height() + 'px',
left: ($(this).attr('offsetWidth') - $more.attr('offsetWidth')) + 'px'
});
}
});
});
</script>

<style>
.longtext {
height: 20px;
width: 300px;
overflow: hidden;
white-space: nowrap;
border: 1px solid #f00;
}

.more {
z-index: 10;
position: relative;
display: block;
background-color: #fff;
width: 18px;
padding: 0 2px;
}
</style>
</head>
<body>
<p class="longtext">This is some really long text. This is some really long text. This is some really long text. This is some really long text.</p>

</body>
</html>