小开

在查看了W3规范的文本溢出之后，我认为仅使用CSS是不可能的。省略号是一个新属性，所以它可能还没有得到太多的使用或反馈。

然而，这家伙似乎问了一个类似(或相同)的问题，有人能够提出一个很好的jQuery解决方案。你可以在这里演示解决方案:http://jsfiddle.net/MPkSF/

如果javascript不是一个选择，我认为你可能不走运…

小开

最佳答案

也有几个jquery插件处理这个问题，但许多不处理多行文本。以下工作:

还有一些性能测试。

小开

好问题……我希望有一个答案，但这是最近你能得到的CSS。没有省略，但仍然很好用。

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

小开

我一直在尝试，直到我成功地实现了接近这个的东西。但有几点需要注意:

它不是纯CSS;你必须添加一些HTML元素。然而，不需要JavaScript。
省略号在最后一行右对齐。这意味着如果您的文本不是右对齐或对齐的，那么在最后一个可见单词和省略号之间可能会有一个明显的间隙(取决于第一个隐藏单词的长度)。
省略号的位置总是保留的。这意味着如果文本几乎完全符合方框，它可能会被不必要地截断(最后一个单词被隐藏，尽管从技术上讲它不必这样做)。
你的文本需要有一个固定的背景颜色，因为我们使用彩色矩形来隐藏省略号在不需要的情况下。

我还应该注意，文本将在单词边界处断开，而不是字符边界处断开。这是故意的(因为我认为这对较长的文本更好)，但由于它与text-overflow: ellipsis所做的不同，我认为我应该提及它。

如果你可以接受这些警告，HTML看起来是这样的:

<div class="ellipsify">
<div class="pre-dots"></div>
<div class="dots">&hellip;</div>
<!-- your text here -->
<span class="hidedots1"></span>
<div class="hidedots2"></div>
</div>

这是相应的CSS，以一个150像素宽的盒子为例，在白色背景上有三行文本。它假设你有一个CSS重置或类似的设置，在必要的地方将边距和填充设置为零。

/* the wrapper */
.ellipsify {
font-size:12px;
line-height:18px;
height: 54px;       /* 3x line height */
width: 150px;
overflow: hidden;
position: relative; /* so we're a positioning parent for the dot hiders */
background: white;
}


/* Used to push down .dots. Can't use absolute positioning, since that
would stop the floating. Can't use relative positioning, since that
would cause floating in the wrong (namely: original) place. Can't
change height of #dots, since it would have the full width, and
thus cause early wrapping on all lines. */
.pre-dots {
float: right;
height: 36px;  /* 2x line height (one less than visible lines) */
}


.dots {
float: right; /* to make the text wrap around the dots */
clear: right; /* to push us below (not next to) .pre-dots */
}


/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
background: white;
width: 150px;
height: 18px;       /* line height */
position: absolute; /* otherwise, because of the width, it'll be wrapped */
}


/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
background: white;
width: 150px;
height: 54px;       /* 3x line height, to ensure hiding even if empty */
position: absolute; /* ensures we're above the dots */
}

结果如下所示:

不同文本长度的渲染结果图像

为了阐明它是如何工作的，下面是相同的图像，除了.hidedots1用红色突出显示，而.hidedots2用青色突出显示。当没有看不见的文本时，这些矩形隐藏了省略号:

与上图相同，只是辅助元素以颜色高亮显示

在IE9, IE8(模拟)，Chrome, Firefox, Safari和Opera中测试。IE7不支持。

小开

为了完整起见，我想补充一下这个问题。

Opera对此有非标准支持，称为-o-ellipsis-lastline。
dotdotdot是一个很棒的jQuery插件，我可以推荐。

小开

下面的链接为这个问题提供了一个纯HTML / CSS的解决方案。

浏览器支持-如文中所述:

到目前为止，我们已经测试了Safari 5.0, IE 9(必须在标准模式)，
. Opera 12和Firefox 15 旧的浏览器仍然可以很好地工作，作为布局的肉是在正常定位，边距和填充属性。如果你的平台较老(例如Firefox 3.6, IE 8)，您可以使用该方法，但重做渐变为一个独立的PNG图像或DirectX过滤器

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

css:

p { margin: 0; padding: 0; font-family: sans-serif;}


.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA; }


.ellipsis:before {
content:"";
float: left;
width: 5px; height: 200px; }


.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px; }


.ellipsis:after {
content: "\02026";


box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;


float: right; position: relative;
top: -25px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;


text-align: right;


background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

html:

<div class="ellipsis">
<div>
<p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>
</div>
</div>

的小提琴

(调整浏览器窗口大小进行测试)

小开

这是最近的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;
}

1) -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 */
}

2)淡出

假设你将行高设置为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%);
}

解决方案#3 -使用@supports的组合

我们可以使用@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>

CSS

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

超文本标记语言

<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专家已经知道如何使它完美。:)

小开

有点晚了，但我想到了，我认为，是一个独特的解决方案。而不是试图通过css技巧或js插入自己的省略号，我想我会试着使用单行限制。所以我复制了每个“行”的文本，只是使用负文本缩进，以确保一行从最后一行停止的地方开始。小提琴

CSS:

#wrapper{
font-size: 20pt;
line-height: 22pt;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}


.text-block-line{
height: 22pt;
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
width: auto;
}
.text-block-line:last-child{
text-overflow: ellipsis;
}


/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
text-indent: -100%;
}
.line3{
text-indent: -200%;
}
.line4{
text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
<span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
<span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
<span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
<span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

更多的细节在小提琴。有一个问题与浏览器回流，我使用JS重绘，这样做检查它，但这是基本概念。任何想法/建议都非常感谢。

小开

我发现这个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技巧，但你必须使用字符串的长度。假设你想要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;
}

小开

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

看更多点击这里 .

小开

谢谢@balpha和@Kevin，我把两种方法结合在一起。

这个方法不需要js。

你可以使用background-image，不需要渐变来隐藏点。

.ellipsis-placeholder的innerHTML是不必要的，我使用.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>

jsfiddler

小开

Javascript解决方案将更好

获取文本的行数
如果窗口大小或元素改变，则切换is-ellipsis类

getRowRects

Element.getClientRects()的工作原理类似于这

同一行中的每个矩形都有相同的top值，因此找出具有不同top值的矩形，如这

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只
面向未来(与时间更加兼容)
不会把单词分开(只在空格上分开)

需要注意的是，它不为不支持-webkit-line-clamp规则的浏览器(目前是IE, Edge, Firefox)提供省省号，但它确实使用渐变淡出文本。

.clampMe {
position: relative;
height: 2.4em;
overflow: hidden;
}


.clampMe:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 1.2em; /* Just use multiples of the line-height */
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}


/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
.clampMe {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
  

.clampMe:after {
display: none;
}
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish 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>

You can see it in action in this CodePen and you can also see a Javascript version here (no jQuery).

小开

基于-webkit-line-clamp的纯CSS方法:

@-webkit-keyframes ellipsis {/*for test*/
0% { width: 622px }
50% { width: 311px }
100% { width: 622px }
}
.ellipsis {
max-height: 40px;/* h*n */
overflow: hidden;
background: #eee;


-webkit-animation: ellipsis ease 5s infinite;/*for test*/
/**
overflow: visible;
/**/
}
.ellipsis .content {
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
font-size: 50px;/* w */
line-height: 20px;/* line-height h */
color: transparent;
-webkit-line-clamp: 2;/* max row number n */
vertical-align: top;
}
.ellipsis .text {
display: inline;
vertical-align: top;
font-size: 14px;
color: #000;
}
.ellipsis .overlay {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
overflow: hidden;


/**
overflow: visible;
left: 0;
background: rgba(0,0,0,.5);
/**/
}
.ellipsis .overlay:before {
content: "";
display: block;
float: left;
width: 50%;
height: 100%;


/**
background: lightgreen;
/**/
}
.ellipsis .placeholder {
float: left;
width: 50%;
height: 40px;/* h*n */


/**
background: lightblue;
/**/
}
.ellipsis .more {
position: relative;
top: -20px;/* -h */
left: -50px;/* -w */
float: left;
color: #000;
width: 50px;/* width of the .more w */
height: 20px;/* h */
font-size: 14px;


/**
top: 0;
left: 0;
background: orange;
/**/
}

<div class='ellipsis'>
<div class='content'>
<div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
<div class='overlay'>
<div class='placeholder'></div>
<div class='more'>...more</div>
</div>
</div>
</div>

在CSS中，使用"…用于多行溢出块