css实现文字过长显示省略号的方法
css实现文字过长显示省略号的方法
发布时间:2015-05-12 来源:查字典编辑
摘要:因为网页排版的需要,有些地方需要过长的问题加上省略号。比如:标题限制20个中文的宽度,超出的就用省略号代替。之前会使用程序截取的方法,不过使...

 因为网页排版的需要,有些地方需要过长的问题加上省略号。比如:标题限制20个中文的宽度,超出的就用省略号代替。之前会使用程序截取的方法,不过使用css来截取更有利于SEO。

下面就介绍一下具体的使用方法:

<div class="title">当对象内文本溢出时显示省略标记</div>

这是一个例子,其实我们只需要显示如下长度:

css实现网页中文字过长截取...

title class应该这样写:

.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

说明:

1、宽度一定要设置,可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记,有两个值:

clip:不显示省略标记(...),而是简单的裁切。
ellipsis:当对象内文本溢出时显示省略标记(...)

4、overflow:hidden表示溢出内容为隐藏。

示例效果图:

#FormatImgID_0#

示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
</head>
<body>
<style type="text/css">
  .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}
  .test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}
</style>
<h2>text-overflow : clip </h2>
  <div class="test_demo_clip">
  不显示省略标记,而是简单的裁切条
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
  当对象内文本溢出时显示省略标记
</div>
</body>
</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类