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. */
+--------------------+
当前回答
我发现这个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
其他回答
谢谢@balpha和@Kevin，我把两种方法结合在一起。
这个方法不需要js。
你可以使用背景图像和不需要梯度隐藏点。
.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>
斯菲德勒
这里有一篇最近的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;
}
}
也有几个jquery插件处理这个问题，但许多不处理多行文本。以下工作:
http://pvdspek.github.com/jquery.autoellipsis/ http://dotdotdot.frebsite.nl/ http://keith-wood.name/more.html http://github.com/tbasse/jquery-truncate
还有一些性能测试。
有点晚了，但我想到了，我认为，是一个独特的解决方案。而不是试图通过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
