试图在响应式设计上将长标题转换为省略号

Question

我正在设计一个响应式Web应用程序,我想用省略号将长文本封装在标题中.我怎样才能做到这一点？这是一个响应式页面(没有固定宽度)......

这是一个例子

有人可以帮忙吗？

编辑:

我添加了最大宽度和省略号溢出,如下所示:

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

但这对我不起作用,因为这里的关键是响应性.我不打算专门针对iOS移动浏览器定位标题的最大宽度,我想在所有智能手机上放大或缩小最大宽度.有什么建议？

Answer 1

谁知道你可以直接用CSS处理这个问题？我很惊讶,但看看text-overflow房子.其中一个可能的值是ellipsis!https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

看小提琴:http://jsfiddle.net/PdRqB/

您需要为标题添加三个属性:

.title {
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
    text-overflow: ellipsis; /* to do what you want. */
}

一个很酷的部分是,不需要媒体查询.它已经响应(尝试调整小提琴中的窗格).

更新:

刚看到你的更新...你的包含元素的宽度可以设置为百分比,甚至100%.然后,overflow: hidden并且white-space: nowrap可以做他们的孩子标题元素魔法.

Answer 2

由于某种原因，text-overflow: ellipsis除非您为元素或其父元素指定固定宽度，否则 using 不起作用。
将以下样式应用到文本元素并将该元素包装在宽度为 100% 的容器中。

{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}