Home > Web Front-end > HTML Tutorial > css 文字超出省略号_html/css_WEB-ITnose

css 文字超出省略号_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:34:58
Original
1319 people have browsed it

white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;
Copy after login

  语法:

  text-overflow : clip | ellipsis

  参数:

  clip :  不显示省略标记(...),而是简单的裁切

  (clip这个参数是不常用的!)

  ellipsis :  当对象内文本溢出时显示省略标记(...)

  说明:

  设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

  请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

  示例:

  div { text-overflow : clip; }

  text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

  text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template