在多行跨度中添加三个点

问题描述

我在这里找到，解决方案很简单：

jsfiddle：

html：

  < span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它做一个类型的样本看< / span> 
  

css：

  span {
 display：内联块; 
 width：180px; 
 white-space：nowrap; 
 overflow：hidden！important; 
 text-overflow：ellipsis; 
} 
  

它的工作原理像预期，它打印： Lorem Ipsum is simply ... ...

现在，我想要的同样的东西，但保持失败，创建下面的例子： / p>

jsfiddle：

html：

 < div class =textContainer 
< img src =＃class =imagealt =the_image> 
< span class =text>快速的棕色狐狸跳过懒惰的狗是一个英语pangram，也就是说，包含英语字母表的所有字母的短语。它已用于测试打字机和计算机键盘，以及涉及英语字母表中所有字母的其他应用程序。由于其简洁性和一致性，它已变得广为人知。< / span> 
< / div> 
  

css：

 code> .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 属性表示这不适用于多行文本：

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

来源：

EDIT
这个小工具有一个使用jquery的解决方法：（来源：）

I found this question here on SO and the solution is pretty simple:

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

And it works like expected, it prints: 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/

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:

.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?

解决方案

The specification for the text-overflow property says that this is not possible for multiline text:

In other words, only works on single line text blocks.

source: 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?)

这篇关于在多行跨度中添加三个点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！