Question

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

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

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

Answer 1

您可以通过将hidden属性设置为text-overflow，将ellipsis属性设置为white-space并将nowrap属性设置为{{{}来实现此功能。 1}}。通过这种方式，当元素太小而无法适应可用空间时，元素内的文本将被修剪，而不必嗅探＆＃34;对于屏幕尺寸。

＆＃13;

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

＆＃13;

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

＆＃13;

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

HTH

Answer 3

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

<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

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

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

根据屏幕宽度修剪字

4 个答案: