Question

我需要限制一些文字，以便它永远不会超过2行

这是我到目前为止所做的：

<h3>Here is some long text, it just keeps on going and going and going.. Hello, how are you? I'm fine thank you. And yadda yadda yadda</h3>

h3 {
    width: 400px;
    font-size: 1.5em;
    max-height: 2.4em;
    line-height: 1.2em;
    overflow-y: hidden;
    /* perhaps throw in some padding and margin control to be sure */
}

请参阅小提琴：http://jsfiddle.net/e5EKY/

它似乎有效，我已经在一些浏览器中测试了它，结果很好

但我可以指望这个吗？是否存在超过2行的情况？

如果用户在浏览器中放大或放大字体大小，则应遵循最大高度和行高（em＆＃39; s），因此我不认为这是一个问题

（PS：我需要使用em＆＃39; s，所以像素大小不是一个选项）

Answer 1

你的方法肯定会有效，但只有一件事：如果你写下一个超过400px宽度的单词，那么它会水平溢出。要解决此问题，您只需要将word-wrap: break-word和white-space: pre添加到CSS规则中。

Answer 2

如果您的问题是关于“用户代理CSS样式表”并覆盖它，那么请使用您的em单位规则背后的！important规则并设置适合您代码的框大小：

h3 {
    width: 400px;
    font-size: 1.5em !important;
    max-height: 2.4em !important;
    line-height: 1.2em !important;
    overflow-y: hidden;/* see @Marco Bonnelli answer to improve this part */
    /* perhaps throw in some padding and margin control to be sure 
     - box-sizing ? */
    box-sizing:content-box !important;/* so no matter if there is borders or padding */
}

当你没有其他选择时，应该使用

!important，否则它会让你疯狂:)。

最大。文字行数;这种方法可靠吗？

2 个答案: