根据屏幕宽度修剪单词

Question

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

我已经完成了检测它是否是移动屏幕并str_limit("Title is too long for a mobile screen", 17)用于修剪句子的工作。

但我的问题是：有很多不同尺寸的手机，我想做适合屏幕宽度的操作，这包括用户是否将屏幕转到 paisage。有人有想法吗？

Answer 1

您可以单独使用 CSS 通过将overflow属性设置为hidden、text-overflow属性为ellipsis和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>