23

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

现在，我想要做同样的事情，但一直失败，在以下示例中创建：

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

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

4

4 回答 4

20

该text-overflow属性的规范说这对于多行文本是不可能的：

此属性指定当内联内容在其具有“溢出”而不是“可见”的内联进展方向上溢出其块容器元素（“块”）时呈现。例如，当文本被阻止换行时（例如，由于'white-space:nowrap' 或单个单词太长而无法容纳），文本可能会溢出。

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

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

编辑 这个小提琴有一个使用 jquery 的解决方法：http: //jsfiddle.net/k5VET/（来源：跨浏览器多行文本溢出，省略号附加在宽度和高度固定的 div 中？）

于 2012-08-03T20:01:35.537 回答
1 
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 属性会放三个点...
例如：

Lorem Ipsum 只是
印刷和
排版行业的虚拟文本。洛雷姆...

于 2016-12-07T09:48:34.023 回答
1

这在没有 js 或 jquery 的情况下是可能的。只是纯CSS。

类似于 vijay 的答案，但要添加，您需要为-webkit-box-orient: vertical;

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* limit to 2 lines */
}
于 2022-01-02T15:28:05.983 回答
0

将width: 200px;和添加white-space: nowrap;到您的 .text css 块。没有设置宽度，文本只是扩展和填充。

于 2012-08-03T19:55:11.977 回答