将整个html文本限制为2行

Question

我有各种尺寸（用CSS定义）height:50px, width:100px. 我希望每个文本中的文本大约减半（仅当它太长时）并在必要时展开，以便适合它。

现在，当文本长度需要额外空间时，会分成3行或更多行并溢出，但我不想隐藏或滚动文本。

您可以在此处查看代码：

CSS:
    div {
        font-size: 20px;
        border: 1px solid;
        width: 100px;
        height: 50px;    
    }
html:
     <div>Lorem ipsum dolor sit amet</div>

Answer 1

单独使用CSS无法做到这一点。您需要使用JavaScript来检测高度并相应地调整框宽的字体大小。

Answer 2

这应该做的工作

div {
display: inline-block;
border: 1px solid;
width: 100px;
height: 50px;  
overflow: hidden;
}

• JSFiddle Example
• Another Topic handling this issue

当然，如果您有不同或更长的文本，则需要交替使用宽度和高度 - 在此Topic中（如前所述）提供了多个解决方案（PHP / CSS）。