English 与
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技巧，但您必须使用字符串的长度。假设您要3条线的宽度为250px，则可以计算每条线的长度，即
//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines
//then ellipsify
function shorten(text, totalLength) {
var ret = text;
if (ret.length > totalLength) {
ret = ret.substr(0, totalLength-3) + "...";
}
return ret;
}
javascript解决方案会更好
is-ellipsis如果窗口调整大小或元素变化，则切换类Element.getClientRects()像这样
同一行中的每个rect具有相同的top值，因此找出具有不同top值的rect ，就像这样
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;
}
...more像这样
像这样
这是我仅使用CSS就能获得的最接近的解决方案。
<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>
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专家对如何使其完美具有想法。:)
谢谢@balpha和@Kevin，我将两种方法结合在一起。
此方法不需要js。
您可以使用background-image并且不需要渐变即可隐藏点。
对innerHTML的.ellipsis-placeholder是没有必要的，我用的.ellipsis-placeholder保持相同的宽度和高度.ellipsis-more。您可以display: inline-block改用。
.ellipsis {
overflow: hidden;
position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
content: "";
float: left;
width: 5px;
}
.ellipsis-text-container {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis-more-container {
float: right;
position: relative;
left: 100%;
width: 5px;
margin-left: -5px;
border-right: solid 5px transparent;
white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
float: right;
clear: right;
color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
float: right;
width: 0;
}
.ellipsis-more {/*ellipsis things here*/
float: right;
}
.ellipsis-height {/*the total height*/
height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
margin-top: -1.2em;
}
.ellipsis-text {
word-break: break-all;
}<div class="ellipsis ellipsis-height ellipsis-line-height">
<div class="ellipsis-more-top ellipsis-height"></div>
<div class="ellipsis-text-container">
<div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
<div class="ellipsis-placeholder">
<span>...</span><span>more</span>
</div>
<span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
</div>
<div class="ellipsis-more-container ellipsis-margin-top">
<div class="ellipsis-more">
<span>...</span><span>more</span>
</div>
</div>
</div>我发现这种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
为了完整起见，只想添加到这个问题。
这是最近的CSS技巧文章，对此进行了讨论。
以上文章中的一些解决方案（此处未提及）是
1）-webkit-line-clamp和2）将绝对定位的元素放到右下角，并逐渐消失
两种方法都采用以下标记：
<div class="module"> /* Add line-clamp/fade class here*/
<p>Text here</p>
</div>
与CSS
.module {
width: 250px;
overflow: hidden;
}
线夹FIDDLE（..最多3条线）
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-height: 3.6em; /* I needed this to get it to work */
}
假设您将line-height设置为1.2em。如果要显示三行文本，我们可以将容器的高度设为3.6em（1.2em×3）。隐藏的溢出将隐藏其余部分。
p
{
margin:0;padding:0;
}
.module {
width: 250px;
overflow: hidden;
border: 1px solid green;
margin: 10px;
}
.fade {
position: relative;
height: 3.6em; /* exactly three lines */
}
.fade:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
我们可以使用@supports在webkit浏览器上应用webkit的换行，并在其他浏览器中应用淡出。
<div class="module line-clamp">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
.module {
width: 250px;
overflow: hidden;
border: 1px solid green;
margin: 10px;
}
.line-clamp {
position: relative;
height: 3.6em; /* exactly three lines */
}
.line-clamp:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
@supports (-webkit-line-clamp: 3) {
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-height:3.6em; /* I needed this to get it to work */
height: auto;
}
.line-clamp:after {
display: none;
}
}
很好的问题...我希望有个答案，但这是您最近使用CSS可获得的最接近的答案。没有省略号，但仍然相当有用。
overflow: hidden;
line-height: 1.2em;
height: 3.6em; // 3 lines * line-height
在查看了W3规范的文本溢出之后，我认为仅使用CSS是不可能的。省略号是一种新颖的属性，因此到目前为止，它可能尚未收到太多使用或反馈。
但是，这个人似乎提出了类似（或相同）的问题，并且有人能够提出一个不错的jQuery解决方案。您可以在此处演示解决方案：http : //jsfiddle.net/MPkSF/
如果无法使用javascript，我认为您可能不走运。
也有几个jquery插件可以解决此问题，但是许多插件不能处理多行文本。以下作品：
还有一些性能测试。
查看更多点击这里