如何触发文本溢出：省略在多行元素 [英] How to trigger text-overflow: ellipsis on multi-line element

问题描述

我有这个元素包含超过可用空间的字符串。文本应仅显示在两行上。我需要 text-overflow：ellipsis 被触发，但它不会在这里发生。我做错了什么？

I have this element that contains a string which exceeds the space available. Text should be displayed on two lines only. I need text-overflow: ellipsis to be triggered but it's not happening here. What am I doing wrong?

<div><span>IpsumLorem Traborditum orb Porfalohyrm</span></div>

div{
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    line-height: 20px;
    padding: 8px 6px 6px;
    height: 44px;
    width: 133px;
}

JSFiddle

推荐答案

您需要 white-space：nowrap; text-overflow：ellipsis; 才能正常运行：
http://jsfiddle.net/DHge3/3/

You need white-space: nowrap; for text-overflow: ellipsis; to work properly: http://jsfiddle.net/DHge3/3/

这篇关于如何触发文本溢出：省略在多行元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！