CSS技巧:文字截断 – 千丝海阁

首页 » HTML/CSS » CSS技巧:文字截断

CSS技巧:文字截断

3316 14

当一个块元素里的文字过长时,文字往往会延伸到块元素之外,很明显,这不是我们想要的效果,一般来说,我们希望文字能够自动截断并显示在块元素内。如果是以前,那么势必是用计算文字长度的方法,先计算出总文字长度l,再计算出多余的文字长度n,然后显示l-n个文字到元素内,而现在用css的话,只要一两行代码就能轻松搞定,来看一下简单示例。

css1

上面的图明显下方的文字介绍部分明显过长,自动换行了,导致整个版面样式错位。我们在这里加上下面一行css试试。

white-space:nowrap;   /*强制不换行*/

css2

可以看到效果变了,所有文字都在同一行内了,这是因为了nowrap的效果,但是另一个问题也随着来了,文字过长了,顶出格了。于是再加上下面一行来看看效果。

overflow:hidden;

css3

好了,果断达到了目的。这里tiandi还有个疑问,网上有介绍text-overflow这个属性,但是无论tiandi设置成ellipsis还是clip,在chrome下都没有明显效果,不知道问题何在。

文章评分1次,平均分5.0

本文原始地址:https://www.tiandiyoyo.com/2014/03/css-nowrap-text/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


14 Comments

  1. 后台限制输出字数,然后闭合标签前加省略号,然后在该a标签上输出该部分的所有文字,我觉得这样更好

  2. 没有定义宽度吧?应该这样:<div style="width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">我是一段文字,后面的我应该是隐藏的!</div>

  3. 我想知道,怎么才能设置标点符号不再句首呢

  4. 我的博客之前也是文字显示有问题!

  5. 西门 :

    晕,你问题还没搞定,就发技巧啊。。。。
    因为没看见截图的demo,就妄加猜测一下。
    如果你那个标题是h2的话,加个宽度试试
    h2{width:100px;overflow:hidden;white-space:mowrap;text-overflow:ellipsis;}

  6. Era :

    text-overflow这属性很少用, 一般用overflow.
    另外请教一个问题。
    我一个小说站被采集,对方用的可能是关关。 日志中的记录如下:
    0322110522 /wanmeishijie.ikxs.org.rar HTTP/1.1 HEAD Internet Explorer 8.0 [] 124.237.136.87
    这个能不能给限制住?
    是否可以通过 判断 HEAD值,然后禁止对方访问。

载入分页评论...