html – 在多行跨度中添加三个点

概述我发现 this question here on SO，解决方案很简单： jsfiddle：http://jsfiddle.net/Y5vpb/ HTML： <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's sta 我发现 this question here on SO，解决方案很简单：

Jsfiddle：http://jsfiddle.net/Y5vpb/

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：

span{    display:inline-block;    wIDth:180px;    white-space: nowrap;    overflow:hidden !important;    text-overflow: ellipsis;}

它的作品像预期一样，它打印：Lorem Ipsum是简单的

现在，同样的事情我想，但保持失败，创建在以下示例：

Jsfiddle：http://jsfiddle.net/9HRQq/

HTML：

<div >                    <img src="#"  alt="the_image">    <span >"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：

.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;}

你能告诉我如何实现在我的例子中的字符串的末尾？

解决方法 text-overflow属性的规范说，这对于多行文本是不可能的：

This property specifIEs rendering when inline content overflows 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).

换句话说，只适用于单行文本块。

来源：http://dev.w3.org/csswg/css3-ui/#text-overflow

编辑
这个小提琴有一个解决方法使用jquery：http://jsfiddle.net/k5VET/(来源：Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?)

总结

以上是内存溢出为你收集整理的html – 在多行跨度中添加三个点全部内容，希望文章能够帮你解决html – 在多行跨度中添加三个点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。