with
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
如果溢出，“…”将显示在行末。 但是，这将只在一行中显示。 但我希望它能多行显示。
它可能看起来像:
+--------------------+
|abcde feg hij dkjd|
|dsji jdia js ajid s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
当前回答
Javascript解决方案将更好
获取文本的行数 如果窗口调整大小或元素更改，则切换is-省略号类
getRowRects
getclientrects()是这样工作的
同一行中的每个矩形都有相同的顶部值，所以找出顶部值不同的矩形，就像这样
function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;
for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}
浮动…更多
像这样
检测窗口大小或元素改变
像这样
其他回答
这是最接近的解决方案，我可以得到只用css。
HTML
<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>
CSS
div {
height: 3em;
line-height: 1.5em;
width: 80%;
border: 1px solid green;
overflow: hidden;
position: relative;
}
div:after {
content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
background-color: white;
color: white;
display: inline;
position: relative;
box-shadow: 8px 1px 1px white;
z-index: 1;
}
span {
position: absolute;
bottom: 0px;
right: 0px;
background-color: white;
}
工作小提琴(调整窗口大小检查)
链接到我的博客获取解释
更新的小提琴
我希望现在一些css专家已经知道如何使它完美。：）
在查看了W3规范的文本溢出后，我认为仅使用CSS是不可能的。省略号是一个新属性，所以它可能还没有得到太多的使用或反馈。
然而，这家伙似乎问了一个类似(或相同)的问题，有人能够提出一个很好的jQuery解决方案。您可以在这里演示解决方案:http://jsfiddle.net/MPkSF/
如果javascript不是一个选择，我认为你可能不走运…
我发现这个css (scss)解决方案的工作相当好。在webkit浏览器上，它显示省略号，而在其他浏览器上，它只是截断文本。这对我的预期用途很好。
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;
h2 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
创建者提供的示例:http://codepen.io/martinwolf/pen/qlFdp
Javascript解决方案将更好
获取文本的行数 如果窗口调整大小或元素更改，则切换is-省略号类
getRowRects
getclientrects()是这样工作的
同一行中的每个矩形都有相同的顶部值，所以找出顶部值不同的矩形，就像这样
function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;
for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}
浮动…更多
像这样
检测窗口大小或元素改变
像这样
也有几个jquery插件处理这个问题，但许多不处理多行文本。以下工作:
http://pvdspek.github.com/jquery.autoellipsis/ http://dotdotdot.frebsite.nl/ http://keith-wood.name/more.html http://github.com/tbasse/jquery-truncate
还有一些性能测试。
