怎么样将多余文字以省略号显示?
在这里会用到CSS属性:white-space;CSS3的属性:text-overflow。
下面用实际例子说明一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
width: 400px;
/*white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;*/
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
当代码是这样的时候,效果如下:
再看下面这个,加上white-space属性、overflow属性和text-overflow属性后就会达到我们想要的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
width: 400px;
white-space:nowrap;
/*规定文本不会换行,直到遇到<br>标签*/
overflow: hidden;
/*隐藏超出的部分*/
text-overflow: ellipsis;
/*将超出的文本以省略号的形式显示*/
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
效果如下: