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>

相关文章：

你感兴趣的文章：

标签云：