在多行跨度中添加三个点

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

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 is simply du...

现在,我希望在下面的示例中创建相同的东西,但始终失败:

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

你能告诉我怎么才能在我的例子中字符串的末尾?

提问于
用户回答回答于

的规范text-overflow属性指出,对于多行文本,这是不可能的:

此属性指定在内联内容它的块容器元素(“块”)在其内联进程方向溢出,而不是“可见”。文本可能溢出,例如,当它被阻止包装(例如,由于“空格:现在”或一个单词太长,不适合)。

换句话说,只在单行文本块上工作.

用户回答回答于
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;
}

上面的css属性会放置三个点..。

扫码关注云+社区