根据屏幕宽度修剪单词

Posted 2023-02-24

【中文标题】根据屏幕宽度修剪单词

【英文标题】：Trim word accorddingly to screen width

【发布时间】：2016-12-11 23:15:25

【问题描述】：

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

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

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

【问题讨论】：

尝试使用带有媒体查询的 css 内容属性

How to restrict character limit by line or # of characters with css?的可能重复

如果您不使用 CSS 解决方案，唯一的另一种方法是使用 AJAX 将屏幕宽度发送回您的服务器，并指定 php，因此您将使用GD 库来查找文本的边界框并进行相应调整。然后发回你找到的长度并相应地裁剪。更复杂的方法来做到这一点。如果您对 CSS 感到满意 - 就这样做吧。 :-)

啊！我也只是查找了如何使用 Raphael 来做到这一点。所以你可能想看看这个：***.com/questions/14838081/…（编辑）实际上是 html5 -or- Raphael。两个答案都给出了。

【参考方案1】：

您可以通过将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>

【讨论】：

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

@jonju，你能澄清一下你在问什么吗，因为这个答案就是这样做的；控制文本的长度。

例如：你的回答是显示This title might be to.. 我们可以让它显示This title might be too long 或任何我们想要的......

【参考方案2】：

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

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

此处示例：http://www.w3schools.com/cs-s-ref/tryit.asp?filename=trycss3_text-overflow_hover

HTH

【讨论】：

会像 OP 想要的那样打印“标题太长”吗？

这会将文本缩短到可用空间并用“...”扩展它

【参考方案3】：

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

text-overflow: ellipsis;

http://www.w3schools.com/cs-s-ref/tryit.asp?filename=trycss3_text-overflow

【参考方案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>