html - 将整个 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 示例
• 处理此问题的另一个主题

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