css控制不溢出,不换行,溢出部分省略号显示：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
一、text-overflow省略号样式语法结构
text-overflow语法：
text-overflow : clip | ellipsis
text-overflow参数值和解释：
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
二、text-overflow应用案例
三、Overflow可以实现隐藏超出对象内容，同时也有显示与隐藏滚动条的作用
2、案例描述
我们假设3个标题的li列表布局，对li对象设置一定宽度和高度，对前两个li列表内容放过多测试文字，第三个li列表放入可显示完测试文字。因为我们要避免内容过多撑破对象，所以我们对li再设一个overflow:hidden css样式，用于css隐藏超出内容，避免内容过多溢出li对象。
- <style type="text/css">
- *{
- padding:0;
- margin:0
- }
- a{ text-decoration:none;
- color:#6699ff
- }
- ul,li{
- list-style:none;
- text-align:left
- }
- #divcss5{
- border:1px #ff8000 solid;
- padding:10px; width:150px;
- margin-left:10px;
- margin-top:10px
- }
- #divcss5 li{
- width:150px;
- height:24px;
- line-height:24px;
- font-size:12px;
- color:#6699ff;
- overflow:hidden;
- text-overflow:ellipsis;
- border-bottom:1px #ff8000 dashed;
- }
- #divcss5 li a:hover{
- color:#333
- }
- style>
- head>
- <body>
- <ul id="divcss5">
- <li><a href="#"><nobr>• 显示不完显示省略号，测试内容nobr>a>li>
- <li><a href="#"><nobr>• 第二排测试内容超出显示省nobr>a>li>
- <li><a href="#"><nobr>• 能显示完几个字nobr>a>li>
- ul>
- body>
- html>