Html 在多行跨度中添加三个点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11802361/
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
Add three dots in a multiline span
提问by Nikola
I found this question here on SOand the solution is pretty simple:
jsfiddle: http://jsfiddle.net/Y5vpb/
jsfiddle：http: //jsfiddle.net/Y5vpb/
html:
html：
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>?
css:
css：
span{
display:inline-block;
width:180px;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
And it works like expected, it prints: Lorem Ipsum is simply du...
它按预期工作，打印： Lorem Ipsum is simply du...
Now, the same thing I would like to, but keep failing, create on the following example:
现在，同样的事情我想要，但一直失败，在下面的例子中创建：
jsfiddle: http://jsfiddle.net/9HRQq/
jsfiddle：http: //jsfiddle.net/9HRQq/
html:
html：
<div class="textContainer">
<img src="#" class="image" alt="the_image">
<span class="text">"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.</span>
</div>
css:
css：
.textContainer{
width: 430px;
float: left;
margin-top: 10px;
border: 1px solid black;
}
.text {
font-size: 24px;
line-height: 24px;
font-weight: bold;
color: #047F04;
display: block;
white-space: normal;
overflow: hidden !important;
text-overflow: ellipsis;
height: 99px;
}
.image {
float: right;
position: absolute;
top: 85px;
right: 10px;
width: 108px;
height: 42px;
}
Can you please tell me how could I achieve to put ...on the end of the string in my example?
你能告诉我...在我的例子中我怎么能实现把字符串的末尾？
采纳答案by Marcelo De Zen
The specification for the text-overflowproperty says that this is not possible for multiline text:
该text-overflow属性的规范说这对于多行文本是不可能的：
This property specifies rendering when inline contentoverflows its block container element ("the block") in its inline progression direction that has ‘overflow' other than ‘visible'. Text can overflow for example when it is prevented from wrapping(e.g. due to ‘white-space:nowrap' or a single word is too long to fit).
当内联内容在其内联进展方向上溢出其块容器元素（“块”）时，该属性指定呈现，该方向具有“溢出”而不是“可见”。例如，当文本被阻止换行时（例如，由于 'white-space:nowrap' 或单个单词太长而无法容纳），文本可能会溢出。
In other words, only works on single line text blocks.
换句话说，仅适用于单行文本块。
source: http://dev.w3.org/csswg/css3-ui/#text-overflow
来源：http: //dev.w3.org/csswg/css3-ui/#text-overflow
EDITThis fiddle has a workaround using jquery: http://jsfiddle.net/k5VET/(source: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?)
编辑这个小提琴有一个使用 jquery 的解决方法：http: //jsfiddle.net/k5VET/（来源：跨浏览器多行文本溢出，在宽度和高度固定的 div 中附加省略号？）
回答by vijay
span{
display: block; /* Fallback for non-webkit */
display: -webkit-box;
-webkit-line-clamp: 3; /* no of lines */
text-overflow: ellipsis;
overflow:hidden !important;
width:180px;
}
above CSS property 'll put three dots...
eg:
CSS 属性上方将放置三个点...
例如：
Lorem Ipsum is simply dummy
text of the printing and
typesetting industry. Lorem...
Lorem Ipsum 只是
印刷和
排版行业的虚拟文本。洛伦...
回答by WebDevNewbie
add width: 200px;and white-space: nowrap;to your .text css block. With no width set, the text just expands and fills in.
添加width: 200px;和white-space: nowrap;到您的 .text css 块。没有设置宽度，文本只是扩展和填充。
