如果内容太宽，在 HTML 标记中插入省略号(...)

小开

好吧，一个简单的解决方案，它没有完全添加“ ...”，但是确实阻止了 < h2 > 分成两行，那就是添加这个 css:

h2 {
height:some_height_in_px; /* this is the height of the line */
overflow:hidden; /* so that the second (or third, fourth, etc.)
line is not visible */
}

我又考虑了一下，想出了这个解决方案，你必须用另一个标签(例如 span)包装 h2标签的文本内容(或者用给定高度的标签包装 h2) ，然后你可以用这种 javascript 过滤掉不需要的单词:

var elems = document.getElementById('conainter_of_h2s').
getElementsByTagName('h2');


for ( var i = 0, l = elems.length; i < l; i++) {
var span = elems.item(i).getElementsByTagName('span')[0];
if ( span.offsetHeight > elems.item(i).offsetHeight ) {
var text_arr = span.innerHTML.split(' ');
for ( var j = text_arr.length - 1; j>0 ; j--) {
delete text_arr[j];
span.innerHTML = text_arr.join(' ') + '...';
if ( span.offsetHeight <=
elems.item(i).offsetHeight ){
break;
}
}
}
}

小开

实际上，有一种非常简单的方法可以利用这样一个事实: IE 使用非标准扩展了用 CSS 做这个，而 FF 支持 :after

如果您愿意，也可以通过检查目标的 scrollWidth 并将其与其父级宽度进行比较来使用用 JS 做这个，但是 imho 这样做的健壮性较差。

编辑: 这显然比我想象的更加成熟。CSS3支持可能很快就会出现，一些不完美的扩展可供您尝试。

最后一本书读起来不错。

小开

我最近也为一个客户做过类似的事情。下面是我为他们做的一个版本(例如在 WinVista 上所有最新的浏览器版本中测试)。并不是所有方面都完美，但是可以很容易地进行调整。

演示: http://enobrev.info/ellipsis/

密码:

<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>

小开

Devon Govett提供了一个简单的 jQuery 解决方案:

Https://gist.github.com/digulla/5796047

要使用，只需在 jQuery 对象上调用省略号()。例如:

$(“ span”) . 省略号() ;

小开

最佳答案

我有一个解决方案工作在 FF3，Safari 和 IE6 + 与单行和多行文本

.ellipsis {
white-space: nowrap;
overflow: hidden;
}


.ellipsis.multiline {
white-space: normal;
}


<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>


<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

椭圆形

(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);


if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;


el.after(t);


function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };


var func = multiline ? height : width;


while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}


el.html(t.html());
t.remove();
}
});
};
})(jQuery);

小开

下面的 CSS 解决方案只适用于截断单行文本，除了 Firefox 6.0之外，所有浏览器在 http://www.caniuse.com中都可以使用。请注意，JavaScript 是完全不必要的，除非您需要支持包装多行文本或早期版本的 Firefox。

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

如果您需要对早期版本的 Firefox 的支持，请查看我对另一个问题的回答。

小开

我做了一个非常酷的 jQuery 插件来处理各种省略号的文本，这个插件叫做 ThreeDots@http://tpgblog.com/threedots

它比 CSS 方法灵活得多，并且支持更高级的、可定制的行为和交互。

好好享受吧。

小开

这与 Alex 的类似，但是是在对数时间内而不是线性时间内完成的，并且采用 maxHeight 参数。

jQuery.fn.ellipsis = function(text, maxHeight) {
var element = $(this);
var characters = text.length;
var step = text.length / 2;
var newText = text;
while (step > 0) {
element.html(newText);
if (element.outerHeight() <= maxHeight) {
if (text.length == newText.length) {
step = 0;
} else {
characters += step;
newText = text.substring(0, characters);
}
} else {
characters -= step;
newText = newText.substring(0, characters);
}
step = parseInt(step / 2);
}
if (text.length > newText.length) {
element.html(newText + "...");
while (element.outerHeight() > maxHeight && newText.length >= 1) {
newText = newText.substring(0, newText.length - 1);
element.html(newText + "...");
}
}
};

小开

我重写了 Alex 的函数，用于 MooTools 库。我把它稍微改成了单词跳转，而不是在单词中间添加省略号。

Element.implement({
ellipsis: function() {
if(this.getStyle("overflow") == "hidden") {
var text = this.get('html');
var multiline = this.hasClass('multiline');
var t = this.clone()
.setStyle('display', 'none')
.setStyle('position', 'absolute')
.setStyle('overflow', 'visible')
.setStyle('width', multiline ? this.getSize().x : 'auto')
.setStyle('height', multiline ? 'auto' : this.getSize().y)
.inject(this, 'after');


function height() { return t.measure(t.getSize).y > this.getSize().y; };
function width() { return t.measure(t.getSize().x > this.getSize().x; };


var func = multiline ? height.bind(this) : width.bind(this);


while (text.length > 0 && func()) {
text = text.substr(0, text.lastIndexOf(' '));
t.set('html', text + "...");
}


this.set('html', t.get('html'));
t.dispose();
}
}
});

小开

一个更灵活的 jQuery 插件，可以让你在省略号后面保留一个元素(例如“ read-more”按钮) ，并在 WindowResize 上更新。它还可以使用标记处理文本:

Http://dotdotdot.frebsite.nl

小开

我找不到一个能够完全按照我想要的方式工作的脚本，所以我为 jQuery 找到了自己的脚本——还有很多选项可以设置:)

Https://github.com/rmorse/autoellipsis

小开

不过我对 CSS 的行为有点惊讶。

var cssEllipsis =
{   "width": "100%","display": "inline-block",
"vertical-align": "middle", "white-space": "nowrap",
"overflow": "hidden", "text-overflow": "ellipsis"
};

除非我提供的宽度控件，我需要绑定的省略号不支持我的原因。宽度是必须添加的属性吗? ? ？请把你的想法。

小开

使用 只有 CSS做省略号

<html>
<head>
<style type="text/css">
#ellipsisdiv {
width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="ellipsisdiv">
This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width.
</div>
</body>
</html>

这段代码适用于大多数当前的浏览器。如果你在 Opera 和 IE 上遇到任何问题(可能你不会遇到) ，把它们添加到样式中:

-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;

* 此功能是 CSS3的一部分，其完整语法如下:

text-overflow: clip|ellipsis|string;

小开

这是另一个 JavaScript 解决方案。效果很好，也很快。

Https://github.com/dobiatowski/jquery 快速省略号

在 Chrome，FF，IE 上测试 Windows 和 Mac。

小开

我使用其他一些帖子构建了这段代码，并进行了以下增强:

它使用二进制搜索来查找正确的文本长度。
它通过设置一次显示事件来处理省略号元素最初隐藏的情况，该事件在第一次显示该项时重新运行省略号代码。这对于某些项最初没有显示的主细节视图或树视图非常方便。
它可以选择添加带有原始文本的 title 属性，以获得悬停效果。
增加了 display: block的样式，所以跨工作
它使用省略号而不是3个句点。
它会自动运行脚本，以便处理任何带有。省略号类的内容

CSS:

.ellipsis {
white-space: nowrap;
overflow: hidden;
display: block;
}


.ellipsis.multiline {
white-space: normal;
}

椭圆形

(function ($) {


// this is a binary search that operates via a function
// func should return < 0 if it should search smaller values
// func should return > 0 if it should search larger values
// func should return = 0 if the exact value is found
// Note: this function handles multiple matches and will return the last match
// this returns -1 if no match is found
function binarySearch(length, func) {
var low = 0;
var high = length - 1;
var best = -1;
var mid;


while (low <= high) {
mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int
var result = func(mid);
if (result < 0) {
high = mid - 1;
} else if (result > 0) {
low = mid + 1;
} else {
best = mid;
low = mid + 1;
}
}


return best;
}


// setup handlers for events for show/hide
$.each(["show", "toggleClass", "addClass", "removeClass"], function () {


//get the old function, e.g. $.fn.show   or $.fn.hide
var oldFn = $.fn[this];
$.fn[this] = function () {


// get the items that are currently hidden
var hidden = this.find(":hidden").add(this.filter(":hidden"));


// run the original function
var result = oldFn.apply(this, arguments);


// for all of the hidden elements that are now visible
hidden.filter(":visible").each(function () {
// trigger the show msg
$(this).triggerHandler("show");
});


return result;
};
});


// create the ellipsis function
// when addTooltip = true, add a title attribute with the original text
$.fn.ellipsis = function (addTooltip) {


return this.each(function () {
var el = $(this);


if (el.is(":visible")) {


if (el.css("overflow") === "hidden") {
var content = el.html();
var multiline = el.hasClass('multiline');
var tempElement = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;


el.after(tempElement);


var tooTallFunc = function () {
return tempElement.height() > el.height();
};


var tooWideFunc = function () {
return tempElement.width() > el.width();
};


var tooLongFunc = multiline ? tooTallFunc : tooWideFunc;


// if the element is too long...
if (tooLongFunc()) {


var tooltipText = null;
// if a tooltip was requested...
if (addTooltip) {
// trim leading/trailing whitespace
// and consolidate internal whitespace to a single space
tooltipText = $.trim(el.text()).replace(/\s\s+/g, ' ');
}


var originalContent = content;


var createContentFunc = function (i) {
content = originalContent.substr(0, i);
tempElement.html(content + "…");
};


var searchFunc = function (i) {
createContentFunc(i);
if (tooLongFunc()) {
return -1;
}
return 0;
};


var len = binarySearch(content.length - 1, searchFunc);


createContentFunc(len);


el.html(tempElement.html());


// add the tooltip if appropriate
if (tooltipText !== null) {
el.attr('title', tooltipText);
}
}


tempElement.remove();
}
}
else {
// if this isn't visible, then hook up the show event
el.one('show', function () {
$(this).ellipsis(addTooltip);
});
}
});
};


// ellipsification for items with an ellipsis
$(document).ready(function () {
$('.ellipsis').ellipsis(true);
});


} (jQuery));

小开

我的答案只支持单行文本。看看下面 gfullam 的多行分叉评论，它看起来很有前途。

我重写了几次第一个答案的代码，我认为这应该是最快的。

它首先找到一个“估计”的文本长度，然后添加或删除一个字符，直到宽度正确。

它使用的逻辑如下:

enter image description here

找到“估计”的文本长度后，将添加或删除字符，直到达到所需的宽度。

我肯定它需要一些调整，但这里的代码:

(function ($) {
$.fn.ellipsis = function () {
return this.each(function () {
var el = $(this);


if (el.css("overflow") == "hidden") {
var text = el.html().trim();
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width('auto')
.height(el.height())
;
el.after(t);


function width() { return t.width() > el.width(); };


if (width()) {


var myElipse = "....";


t.html(text);


var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length;


t.html(text.substr(0, suggestedCharLength) + myElipse);


var x = 1;
if (width()) {
while (width()) {
t.html(text.substr(0, suggestedCharLength - x) + myElipse);
x++;
}
}
else {
while (!width()) {
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
x++;
}
x--;
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
}


el.html(t.html());
t.remove();
}
}
});
};
})(jQuery);

小开

这里有一个很好的 widget/plugin 库，它内置了省略号: http://www.codeitbetter.co.uk/widgets/ellipsis/所有你需要做的就是引用这个库并调用以下命令:

<script type="text/javascript">
$(document).ready(function () {
$(".ellipsis_10").Ellipsis({
numberOfCharacters: 10,
showLessText: "less",
showMoreText: "more"
});
});
</script>
<div class="ellipsis_10">
Some text here that's longer than 10 characters.
</div>

小开

Trunk8 jQuery 插件支持多行，并且可以使用任何 html，而不仅仅是省略号字符作为截断后缀: https://github.com/rviscomi/trunk8

演示: http://jrvis.com/trunk8/

小开

你可以很容易地做到这一点，只与 css，例如: sass 模式

.truncatedText {
font-size: 0.875em;
line-height: 1.2em;
height: 2.4em; // 2 lines * line-height
&:after {
content: " ...";
}
}

还有省略号;)

小开

有一个纯 CSS 的多行文本解决方案。它被称为 line-clamp，但它只能在 webkit 浏览器中工作。然而，有一种方法可以在所有现代浏览器中模仿这一点(所有比 IE8更新的浏览器)此外，它只能在固体背景下工作，因为你需要一个背景图像来隐藏最后一行的最后一个词。事情是这样的:

考虑到这个 html:

<p class="example" id="example-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

这是 CSS:

p {
position:relative;
line-height:1.4em;
height:4.2em;      /* 3 times the line-height to show 3 lines */
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(ellipsis_bg.png) repeat-y;
}

省略号 _ bg.png 是与背景颜色相同的图像，宽度大约为100px，高度与行高相同。

它不是很漂亮，因为你的文字可能被剪切在一个字母的中间，但它可能在某些情况下是有用的。

参考资料: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php

小开

以防万一你们都在2013年来到这里——这里是我在这里发现的纯 CSS 方法: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

效果很好。

小开

就像@acSlater 一样，我找不到我需要的东西，所以我自己卷了一卷。分享以防其他人可以使用:

方法:

ellipsisIfNecessary(mystring,maxlength);

用法:

trimmedString = ellipsisIfNecessary(mystring,50);

代码和演示链接: https://gist.github.com/cemerson/10368014

小开

纯 CSS 多行省略文本内容:

.container{
position: relative;  /* Essential */
background-color: #bbb;  /* Essential */
padding: 20px; /* Arbritrary */
}
.text {
overflow: hidden;  /* Essential */
/*text-overflow: ellipsis; Not needed */
line-height: 16px;  /* Essential */
max-height: 48px; /* Multiples of line-height */
}
.ellipsis {
position: absolute;/* Relies on relative container */
bottom: 20px; /* Matches container padding */
right: 20px; /* Matches container padding */
height: 16px; /* Matches line height */
width: 30px; /* Arbritrary */
background-color: inherit; /* Essential...or specify a color */
padding-left: 8px; /* Arbritrary */
}

<div class="container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
<div class="ellipsis">...</div>
</div>

请检查代码片段以获得实际示例。

小开

<html>
<head>
<!-- By Warren E. Downs, copyright 2016.  Based loosely on a single/multiline JQuery using example by Alex,
but optimized to avoid JQuery, to use binary search, to use CSS text-overflow: ellipsis for end,
and adding marquee option as well.
Credit: Marquee: http://jsfiddle.net/jonathansampson/xxuxd/
JQuery version: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
(by Alex, http://stackoverflow.com/users/71953/alex)
(Improved with Binary Search as suggested by StanleyH, http://stackoverflow.com/users/475848/stanleyh)
-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>


.single {
overflow:hidden;
white-space: nowrap;
width: 10em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}


.multiline {
overflow: hidden;
white-space: wrap;
width: 10em;
height: 4.5em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}


.marquee {
overflow: hidden;
width: 40em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}


</style>
<script>
var _marqueeNumber=0;
// mode=start,end,middle
function clipText(text, len, mode) {
if(!mode) { mode="end"; }
else { mode=mode.toLowerCase(); }
if(mode == "start") { return "&hellip;"+clipText(text,len,"_start"); }
if(mode == "_start") { return text.substr(text.length - len); }
if(mode == "middle") {
return clipText(text, len/2, "end") + clipText(text, len/2, "_start");
}
return text.substr(0, len) + "&hellip;";
}


function generateKeyframes(clsName, start, end) {
var sec=5;
var totalLen=parseFloat(start)-parseFloat(end);
if(start.indexOf('em') > -1)      { sec=Math.round(totalLen/3); }
else if(start.indexOf('px') > -1) { sec=Math.round(totalLen/42); }


var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body {}';
document.getElementsByTagName('head')[0].appendChild(style);
this.stylesheet = document.styleSheets[document.styleSheets.length-1];
try {
this.stylesheet.insertRule('.'+clsName+' {\n'+
'    animation: '+clsName+' '+sec+'s linear infinite;\n'+
'}\n', this.stylesheet.rules.length);
this.stylesheet.insertRule('.'+clsName+':hover {\n'+
'    animation-play-state: paused\n'+
'}\n', this.stylesheet.rules.length);
this.stylesheet.insertRule('@keyframes '+clsName+' {\n'+
'    0%   { text-indent: '+start+' }\n'+
'    100% { text-indent: '+end+' }\n'+
'}', this.stylesheet.rules.length);
} catch (e) {
console.log(e.message);
}
}


function addClone(el, multiline, estyle) {
if(!estyle) {
try { estyle=window.getComputedStyle(el); }
catch(e) { return null; }
}
var t = el.cloneNode(true);
var s=t.style;
//s.display='none';
s.visibility='hidden'; // WARNING: Infinite loop if this is not hidden (e.g. while testing)
s.display='inline-block';
s.background='black';
s.color='white';
s.position='absolute';
s.left=0;
s.top=0;
s.overflow='visible';
s.width=(multiline ? parseFloat(estyle.width) : 'auto');
s.height=(multiline ? 'auto' : parseFloat(estyle.height));


el.parentNode.insertBefore(t, el.nextSibling);


return t;
}
function getTextWidth(el, multiline) {
var t=addClone(el, multiline);
if(!t) { return null; }
var ts=window.getComputedStyle(t);
var w=ts.width;
if(multiline) {
var es=window.getComputedStyle(el);
var lines=Math.round(parseInt(ts.height)/parseInt(es.height))*2+0.5;
w=w+'';
var unit=''; // Extract unit
for(var xa=0; xa<w.length; xa++) {
var c=w[xa];
if(c <= '0' || c >= '9') { unit=w.substr(xa-1); }
}
w=parseFloat(w);
w*=lines; // Multiply by lines
w+=unit; // Append unit again
}
t.parentNode.removeChild(t);
return w;
}


// cls=class of element to ellipsize
// mode=start,end,middle,marq (scrolling marquee instead of clip)
function ellipsis(cls, mode) {
mode=mode.toLowerCase();
var elems=document.getElementsByClassName(cls);
for(xa in elems) {
var el=elems[xa];
var multiline = el.className ? el.className.indexOf('multiline') > -1 : true;
if(mode == "marq") {
var w=getTextWidth(el, multiline);
if(!w) { continue; }
var mCls="dsmarquee"+(_marqueeNumber++);
var es=window.getComputedStyle(el);
generateKeyframes(mCls,es.width, '-'+w);
el.className+=" "+mCls;
continue;
}
if(mode == "end" && !multiline) { el.style.textOverflow="ellipsis"; continue; }
var estyle=null;
try { estyle=window.getComputedStyle(el); }
catch(e) { continue; }
if(estyle.overflow == "hidden") {
var text = el.innerHTML;
var t=addClone(el, multiline, estyle);


function height() {
var ts=window.getComputedStyle(t);
var es=window.getComputedStyle(el);
return parseFloat(ts.height) - parseFloat(es.height);
}
function width() {
var ts=window.getComputedStyle(t);
var es=window.getComputedStyle(el);
return parseFloat(ts.width) - parseFloat(es.width);
}


var tooLong = multiline ? height : width;


var len=text.length;
var diff=1;
var olen=0;
var jump=len/2;
while (len > 0) {
var diff=tooLong();
if(diff > 0) { len-=jump; jump/=2; }
else if(diff < 0) { len+=jump; }
len=Math.round(len);
//alert('len='+len+';olen='+olen+';diff='+diff+';jump='+jump+';t='+JSON.stringify(t.innerHTML));
t.innerHTML=clipText(text, len, mode);
if(olen == len) { break; }
olen=len;
}
el.innerHTML=t.innerHTML;
t.parentNode.removeChild(t);
}
//break;
t.style.visibility='hidden';
}
}


function testHarness() {
ellipsis('ellipsis1', 'start');
ellipsis('ellipsis2', 'end');
ellipsis('ellipsis3', 'middle');
ellipsis('marquee', 'marq')
}
</script>
</head>
<body onload="testHarness()">
<div class="single ellipsis1" style="float:left">some long text that should be clipped left</div>
<div class="single ellipsis2" style="float:right">right clip long text that should be clipped</div>
<div class="single ellipsis3" style="float:center">some long text that should be clipped in the middle</div>


<br />


<p class="single marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
&nbsp;


<br />


<div class="multiline ellipsis1" style="float:left">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped left(*)</div>


<div class="multiline ellipsis2" style="float:right">right clip multiline long text, such as Test test test test test test, and some more long text that should be multiline clipped right.</div>


<div class="multiline ellipsis3" style="float:center">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped in the middle(*)</div>


<br />


<p class="multiline marquee">Multiline Marquee: Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
&nbsp;


</body>
</html>