CSS 如何进行文本溢出：两行省略号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31698413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I do text-overflow: ellipsis on two lines?
提问by user1227914
I have a container where the text may expand to two lines and it's 40px in height, with an 18px font size. When I do:
我有一个容器，文本可以扩展为两行，高度为 40 像素，字体大小为 18 像素。当我做：
text-overflow: ellipsis;
white-space: nowrap;
Then the dotted line shows correctly but it gets cut off on one line. When I do just the:
然后虚线显示正确，但在一行上被切断。当我只做：
text-overflow: ellipsis;
Then it correctly shows the 2 lines but there's no "..." at the end. How do I achieve this so it correctly uses both lines AND finishes with "..." on the second line?
然后它正确显示了 2 行，但最后没有“...”。我如何实现这一点，以便它正确使用两行并在第二行以“...”结束？
采纳答案by Rick Hitchcock
Add a spanto the container, which will hold the text:
将 a 添加span到将保存文本的容器中：
<div class="container">
<span>text...</span>
</span>
Add this CSS:
添加这个CSS：
.container {
overflow: hidden;
position: relative;
background: white; //or other color
}
.container:after {
content: '...'; //the ellipsis
position: absolute; //positioned in bottom-right
bottom: 0; //...
right: 0; //...
padding: 0 0.3em; //give some separation from text
background: inherit; //same color as container
}
.container span:after {
content: '<p class="">Pellentesque habitant morbi tristique senectus et netus et </p>
00a0'; //a space
position: absolute; //to cover up ellipsis if needed
width: 1000px; //...
z-index: 1; //...
background: white; //must match container's color. can't use inherit here.
}
Resize the container, and you'll see that the ellipsis displays only as necessary.
调整容器大小，您将看到省略号仅在必要时显示。
Should work in all modern browsers.
应该适用于所有现代浏览器。
回答by VamsiKaja
You can do it using -webkit-line-clamp. But a hack is needed. You need to set the height of the div such that it can accommodate only two lines.
您可以使用-webkit-line-clamp. 但是需要破解。您需要设置 div 的高度，使其只能容纳两行。
See this codepen https://codepen.io/VamsiKaja/pen/xYZVzY
请参阅此代码笔https://codepen.io/VamsiKaja/pen/xYZVzY
HTML file :
HTML 文件：
p {
width:250px;
font-size:20px;
margin:1em;
height:50px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
CSS file :
CSS文件：
.element {
display: inline-block;
height: 200px;
overflow-y: auto;
/* this is to preserve text containing new lines */
white-space: pre-line;
}
}
}
回答by puiu
Just want to add my two cents. The closest pure CSS solution that works is the -webkit-line-clampmethod but is limited to webkit browsers and is the remnant of an old flexbox implementation (which may be removed in the future).
只想加上我的两分钱。最接近的纯 CSS 解决方案是-webkit-line-clamp方法，但仅限于 webkit 浏览器，并且是旧的 flexbox 实现的残余（将来可能会被删除）。
Perhaps you should reconsider if you really require an ellipses on vertically overflowed text.
也许您应该重新考虑是否真的需要在垂直溢出的文本上使用省略号。
I suggest instead use a scroll-able text box instead. I believe this is the best solution because of these three reasons:
我建议改用可滚动的文本框。我相信这是最好的解决方案，因为这三个原因：
- Works in every major browser
- No css workarounds, hacks, or javascript involved
- Communicates well to the user that text is cutoff but gives them the option to scroll through it if they wish - plus, users are already accustomed to vertical scroll bars
- 适用于所有主要浏览器
- 不涉及 css 解决方法、hacks 或 javascript
- 向用户传达文本被截断的信息，但如果他们愿意，可以让他们选择滚动浏览 - 此外，用户已经习惯了垂直滚动条
Here is sample code for a text box:
以下是文本框的示例代码：
@-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;
/**/
}If I had to choose though, I would use a javascript solution along the lines of Succintwhich deletes words after a certain amount and appends an ... at the end. This is great if you use React because you can implement all the code required inside the component as a function and if you need the original text you still have it as a props value.
如果我不得不选择，我会使用一个 javascript 解决方案，沿着Succint行，它会在一定数量后删除单词并在最后附加一个 ...。如果您使用 React，这很棒，因为您可以将组件内部所需的所有代码实现为一个函数，并且如果您需要原始文本，您仍然可以将其作为 props 值。
回答by Defims
a pure css method base on -webkit-line-clamp:
基于 -webkit-line-clamp 的纯 css 方法：
<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>