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

一种可能的解决方案是使用overflow: hidden且其高度等于行高。

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

这不是最好的解决方案，但是您不需要包装要隐藏的部分

Answer 3

您可以设置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 4

出于完整性考虑，这里是JS版本

请注意，从头开始从div中删除节点会改变顺序-如果我们将BR循环删除，则两个textnode将合并，因此我们需要向后进行操作

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>

用CSS隐藏第二行文字

4 个答案:

使用CSS