css 单行文本溢出显示省略号解决办法

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

css 单行文本溢出显示省略号解决办法样式代码，四个属性都是必须的，并且宽度必须设在当前容器上，父容器定宽无效：代码如下 .box { width: 200px; white-space: nowrap; overflow: hidden; text-o

css 单行文本溢出显示省略号解决办法

样式代码，四个属性都是必须的，并且宽度必须设在当前容器上，父容器定宽无效：

代码如下
.box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

测试 IE6、IE7、IE8、IE9、Chrome、Firefox 均支持。

测试实例

代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text overflow ellipsis</title>
<style>
  .box {
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }
</style>
</head>
<body>
<h1>text overflow ellipsis</h1>

<div class="box">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>
</html>

上一篇：CSS中div高度内容垂直方向居中方法总结
下一篇：css div网页折叠层

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

css 单行文本溢出显示省略号解决办法

热门标签

赞助商链接