根据屏幕宽度调整单词长度

Question

我在导航栏上有一个显示标题的空间。我想要做的是：在桌面屏幕上显示为："Title is too long for a mobile screen"，在移动屏幕上显示为："Title is too long..."。

我已经检测到了是否为移动屏幕，并使用str_limit("Title is too long for a mobile screen", 17)来截断句子。

但我的问题是：移动电话的尺寸有很多不同，我希望它能适应屏幕宽度，包括用户将屏幕旋转到横向的情况。有人有什么想法吗？

- dante

---

尝试使用CSS内容属性与媒体查询。 - jonju

可能是如何使用CSS限制每行或每个字符的字符限制？的重复问题。 - mister martin

如果您不使用CSS解决方案，则唯一的其他方法是使用AJAX将屏幕宽度发送回服务器，然后指示PHP使用GD库查找文本的边界框并进行相应调整。然后发送您找到的长度并进行相应裁剪。这是一种更复杂的方法。如果您对CSS满意-请使用它。 :-) - Mark Manning

啊！我也刚刚查了一下如何使用Raphael来做这件事。所以你可能想看看这个链接：http://stackoverflow.com/questions/14838081/getting-the-size-of-text-without-using-the-boundingbox-function-in-raphael-javas （编辑）实际上是HTML5或Raphael。两个答案都给出了。 - Mark Manning

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>

- Shaggy

---

我们可以控制文本的长度吗？ - jonju

@jonju，请问您能否澄清您的问题，因为这个答案正是如此；控制文本的长度。 - Shaggy

你的答案显示为“此标题可能过长”，我们能否将其更改为显示“此标题可能过长”或任何我们想要的内容？ - jonju

Answer 2

我更喜欢使用CSS解决方案，因为如果要得到文本的像素长度，你需要进行很多计算...

<span style="text-overflow: ellipsis">Title is too long for a mobile screen</span>

这里有一个示例：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow_hover

希望这能帮到你。

- Oliver

---

这段代码是否会像 OP 想的那样打印出 "标题太长"？ - jonju

这将把文本缩短到可用的空间，并用“...”扩展。 - Oliver

Answer 3

尝试将这段 CSS 代码应用到元素中：

text-overflow: ellipsis;

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

- Mart Oosterveld

Answer 4

使用这种方法，您可以打印任何您想要的内容

.title:before{
  content:"Title is too long for a mobile screen";
}
@media(max-width:480px){
  .title:before{
    content:"Title is too long...";
  }
}

<h1 class="title"></h1>

- jonju