用CSS隐藏第二行文本

Question

我有一行代码：

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>

如何使用CSS隐藏换行符后的文本行

<br>

？

Answer 1

您无法像在 JavaScript 中那样在 CSS 中定位文本节点，因此无法使用当前标记隐藏

<br>

之后的文本。

您需要修改它以将要隐藏的文本部分包装在单独的元素中。例如：

<div class="site-info">The quick brown fox <br><span style="display: none">Jumps over the lazy dog</span></div>

使用CSS

HTML

<div class="site-info">The quick brown fox <br><span>Jumps over the lazy dog</span></div>

CSS

.site-info span{display: none}

Answer 2

您可以设置相对于 font-size 的

height

（与

line-height

值相同）并设置

overflow: hidden

.site-info {
    border: solid 2px blue;
    width: 200px;
    overflow: hidden;
    height: 1.4em;
    line-height: 1.4em;
}

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>

Answer 3

一个可能的解决方案是使用

overflow: hidden

和等于行高的高度。

.site-info {
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}

这不是最好的解决方案，但你不需要包裹你想隐藏的部分

Answer 4

为了完整起见，这里是 JS 版本

注意，从头开始从 div 中删除节点会改变顺序 - 如果我们在循环中删除 BR，两个文本节点将合并，因此我们需要向后执行

var si = document.querySelector(".site-info")
var nodes = si.childNodes;
var span = document.createElement("span");
span.className="hide"
for (var i=nodes.length-1; i>=0; i--) {
  var n = nodes[i];
  console.log(n.tagName || n.wholeText)
  span.insertBefore(n,span.firstChild)
  if (n.tagName=="BR") break;
};
si.appendChild(span)

.hide { color:red }/* display: none }*/

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>

Answer 5

您可以使用

::first-line

伪类，如下所示：

.site-info::first-line {
 visibility: visible; /*or color: black;*/
}
.site-info {
visibility: collapse; /* or color: transparent;*/
}

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>