html - 部分隐藏 h1 中的单词

Question

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

<h1>First Last</h1>

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

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

score 2 · Accepted Answer

不可能从标签中选择最后一个单词。我能想到的唯一可能性是使用媒体查询，当行太小时加载此自定义 CSS：

h1 {
   visibility: hidden;
}

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

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

score 2 · Accepted Answer

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

h1 {
    white-space: nowrap;
}

这将确保即使窗口调整大小，文本也不会随着窗口缩小而折叠并隐藏。

这是说明问题的工作演示。

score 1 · Accepted Answer

我通常会做类似的事情

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

}

省略号输出...以显示还有更多文本，如果您根本不想要任何东西，我会做

text-overflow: inherit;

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

例如

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

score 1 · Accepted Answer

如果让溢出的单词中断到下一行，则可以使用具有高度而不是宽度的溢出来创建该效果：

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

4 回答 4