Javascript 根据屏幕宽度修剪单词

我的导航栏上有一个空格，上面有一个标题。我想做的是：在桌面屏幕上显示：“标题对于移动屏幕来说太长了” 在手机屏幕上：“标题太长…”

我已经做了检测，如果它是一个移动屏幕，并使用

stru limit（“标题对于移动屏幕来说太长了”，17）

来修剪句子

---

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

我更喜欢css解决方案，因为您需要进行大量计算才能获得以像素为单位的文本长度

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

标题对于移动屏幕太长

示例如下：

---

HTH

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

text-overflow: ellipsis;

---

您可以通过将

溢出

属性设置为

隐藏

，将

文本溢出

属性设置为

省略号

，将

空白

属性设置为

nowrap

来实现这一点。这样，当元素太小而无法容纳可用空间时，元素中的文本将被修剪，而无需“嗅探”屏幕大小

h1{
背景：#000；
颜色：#fff；
字体系列：无衬线；
溢出：隐藏；
填充物：5px；
文本溢出：省略号；
空白：nowrap；
宽度：50%；
}

---

此标题可能太长，不适合您的屏幕

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

。标题：之前{
内容：“标题对于移动屏幕来说太长”；
}
@介质（最大宽度：480px）{
.标题：之前{
内容：“标题太长…”；
}
}

---

尝试将css内容属性与媒体查询一起使用。如果您不使用css解决方案，唯一的其他方法是使用AJAX将屏幕宽度发送回服务器，并指示PHP，以便使用GD库查找文本的边界框并进行相应调整。然后将找到的长度发回，并进行相应的裁剪。做这件事的方式要复杂得多。如果您对CSS感到满意，请这样做。：-）啊!！我还用拉斐尔研究了如何做到这一点。所以你可能想看看这个：（编辑）实际上是HTML5或拉斐尔。两个答案都给出了。我们能控制文本的长度吗？@jonju，请你澄清一下你的问题，因为这个答案正是如此；控制文本的长度。例如：您的答案是显示

此标题可能是…

我们是否可以将其设置为显示

此标题可能太长

或我们想要的任何内容。此打印“标题太长”是否与所需的OP一样？这会将文本缩短到可用空间，并用“…”扩展它