【问题标题】:HTML/CSS "Responsive Truncation"HTML/CSS“响应式截断”
【发布时间】:2013-10-04 03:55:56
【问题描述】:

我最近推出了我的网站的响应式版本,但是我发现包含许多单行文本的百分比宽度分割看起来非常糟糕,因为在桌面和移动视图中将所有内容都放在一行中会导致每一行文本要么太长要么太短。

我的标记是一个无序列表的链接(带有长锚文本) - 有没有人有任何建议可以根据包含分区的宽度截断锚文本?

【问题讨论】:

    标签: html css responsive-design


    【解决方案1】:

    我可以提出两个选择:

    一种方法是使用此处描述的 javascript 自己完成:

    Calculate text width with JavaScript

    在浏览器实际呈现文本之前,我认为没有任何方法可以确定文本的宽度。

    确保您不显示:none,否则浏览器不会实际呈现它并且您无法确定宽度。

    二是让CSS为你做;它更容易,但您几乎失去了所有灵活性:

    如果你愿意让 CSS 猜测如何将你的文本截成省略号,你可以试试 text-overflow: ellipsis

    http://www.quirksmode.org/css/textoverflow.html

    【讨论】:

      猜你喜欢
      • 2015-04-27
      • 2017-04-03
      • 2014-06-01
      • 1970-01-01
      • 2013-03-02
      • 2014-05-15
      • 2012-10-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多