将整个 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)。