javascript - 根据屏幕宽度裁剪单词

Question

我的导航栏上有一个带有标题的空间。我想做的是:在桌面屏幕上显示:“标题对于移动屏幕来说太长了”在移动屏幕上:“标题太长...”

我已经完成了检测它是否是移动屏幕并使用 str_limit("Title is too long for a mobile screen", 17) 来 trim 句子。

但我的问题是:有很多不同尺寸的手机，我想根据屏幕宽度进行调整，包括用户将屏幕调整为 paisage 的情况。有人有想法吗？

Answer 1

您可以通过将 overflow 属性设置为 hidden，将 text-overflow 属性设置为 ellipsis<，单独使用 CSS 实现此目的 和 white-space 属性到 nowrap。这样，当元素中的文本太小而无法适应可用空间时，将对其进行裁剪，而无需“嗅探”屏幕大小。

h1{
  background:#000;
  color:#fff;
  font-family:sans-serif;
  overflow:hidden;
  padding:5px;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:50%;
}

<h1>This title might be too long to fit your screen</h1>