属性：强制换行：
word-wrap:break-word; word-break:break-all; white-space:pre-wrap;
强制不换行：
overflow:hidden; width:300px; white-space:nowrap; text-overflow: ellipsis;
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
ul {
width: 300px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #D4D4D4;
background: #F1F1F1;
list-style: none;
}
li { margin: 12px 0; }
li a {
display: block;
width: 80px;
overflow: hidden;/*注意不要写在最后了*/
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/*
clip：
不显示省略标记（...），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（...）
*/
</style>
</head>
<body>
<ul>
<li><a href="#">网页设计网页设计网页设计</a></li>
</ul>
相关推荐
主要介绍了CSS实现限制字数功能当对象内文本溢出时显示省略标记，需要的朋友可以参考下
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏
设置或检索是否使用一个省略标记（…）标示对象...text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（w
越界省略号 复制代码代码如下: .text-overflow { .../* 当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/ } 自动换行： 复制代码代码如下: word-break:break-all;/* 不换行 */ white-sp
看到标题你一定很容易就会想到截断文字加“…”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像还有很多人不记得遇到这样的情况该如何处理。.../* 当对象内文本溢出时显示省略标记(…) ；
clip:不显示省略标记(….),溢出的文本会被的裁减掉。ellipsis：文本溢出时会显示省略的标记(…),插入的位置是最后一个字符。 要使该属性起作用，还得具备以下几个条件。 width | max-width：明确给需要截取文本的...
4.auto 自动，溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性：border： 取值： 2、边框倒角 属性：border-radius: 取值： px % 3、边框阴影 属性：box-shadow: 取值： ...
在w3cschool中css3中有个文本相关的属性text-overflow，当把它设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉，当然，前提是设置好两个属性，那就是white-space:nowrap...
当一行文字超过div宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行显示那要怎么办呢？ 我想大家首先想到的办法就是用截断文字加“…”的做法。... /* 当对象内文本溢出时显示省略标记(…) ；需与o