Question

我有一个简单的双字标题，我想删除或隐藏最后一个字，而不是将它包装到下一行，当窗口中没有足够的空间容纳这两个字时。

<h1>First Last</h1>

我知道css没有第一个字选择器，所以这不是一个选项。我可以隐藏溢出，但我希望最后一句话一下子消失，而不是一字一句地消失。当然，我会想到white-space:nowrap;，但这并没有删除这个词。

有没有办法用css做到这一点？最好没有固定的高度或宽度？

Answer 1

简单。使用white-space:nowrap; CSS属性。

h1 {
    white-space: nowrap;
}

这将确保即使窗口调整大小，当窗口缩小时，文本也不会被包裹并隐藏。

以下是 WORKING DEMO 来说明问题。

Answer 2

无法从标签中选择最后一个单词。我能想到的唯一可能性是使用media query加载此自定义CSS，当行大小太小时：

h1 {
   visibility: hidden;
}

h1:before {
    visibility: visible;
    content: "First";
}

当然，这需要您指定显示的内容。

Answer 3

我通常会做类似

的事情

h1 {
  font-size: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 745px;

}

省略号输出...显示有更多文字要来，如果你不想要任何东西我会做

text-overflow: inherit;

如果要剪切文本，另一个好的提示是向h1添加title属性，以便用户可以在悬停时看到完整的单词。

例如

<h1 title="First Last">First Last</h1>

Answer 4

如果让溢出的单词突破到下一行，您可以使用高度而不是宽度的溢出来创建该效果：

h1 {
    height: 30px;
    overflow: hidden;
}