对于CSS，使用"...“用于多行的溢出块
对于CSS，使用"...“用于多行的溢出块
提问于 2011-06-03 11:16:34
使用
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. */
+--------------------+回答 16
Stack Overflow用户
回答已采纳
发布于 2011-06-03 13:22:09
也有几个jquery插件可以解决这个问题，但很多都不能处理多行文本。以下工作：
- http://pvdspek.github.com/jquery.autoellipsis/
- http://dotdotdot.frebsite.nl/
- http://keith-wood.name/more.html
- http://github.com/tbasse/jquery-truncate
还有一些preformance tests。
Stack Overflow用户
发布于 2012-08-07 02:30:57
我一直在苦苦思索，直到我成功地实现了这一点。它有几个警告：
它不是纯；你必须添加一些
- 元素。但是不需要JavaScript。
- 省略号在最后一行右对齐。这意味着如果您的文本没有右对齐或对齐，最后一个可见字和省略号之间可能会有一个明显的间隙(取决于第一个隐藏字的长度)。
- 省略号的空间总是保留的。这意味着如果文本几乎精确地放入框中，它可能会被不必要地截断(最后一个单词被隐藏，尽管从技术上讲它不需要)。
- 文本需要有固定的背景色，因为我们使用彩色矩形来隐藏省略号，以防不需要省略号。
我还应该注意，文本将在单词边界处断开，而不是在字符边界处断开。这是经过深思熟虑的(因为我认为这对较长的文本更好)，但因为它与text-overflow: ellipsis所做的不同，所以我想我应该提到它。
如果你能接受这些警告，HTML看起来是这样的：
<div class="ellipsify">
<div class="pre-dots"></div>
<div class="dots">…</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、火狐、Safari和Opera上进行了测试。在IE7中不起作用。
Stack Overflow用户
发布于 2013-08-27 14:23:18
这是最近的一篇css-tricks article，讨论了这一点。
上面文章中的一些解决方案(这里没有提到)是
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-线夹
(..for最多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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6222616
复制相关文章
相似问题
腾讯云开发者
