核心提示：一、理论：1.text-overflowa.clip 不显示省略标记b.ellipsis 显示省略标记二、实践：1.meta charset=UTF-8 /title/titlestyle type=...
一、理论：
1.text-overflow
a.clip 不显示省略标记
b.ellipsis 显示省略标记
这里是一碗汤
1.text-overflow
a.clip 不显示省略标记
b.ellipsis 显示省略标记
二、实践：
1.
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.text-overflow-clip1{
width: 80px;
padding: 10px;
border: 1px solid #ccc;
text-overflow: clip;
}
.text-overflow-clip2{
width: 80px;
padding: 10px;
border: 1px solid #ccc;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
}</style>
我就是来看一下是不是这里有好吃的。如果没有我就再换个地方找。 我又换了一个地方，果然找到好吃的了。开心。 2.
<meta charset="UTF-8" />
<title></title>
<link href="https://www.w3cplus.com/demo/css3.base.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
.block{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
width:60px;
line-height: 20px;
border:1px solid #fc9;
}
.block ol{
padding-left: 23px;
width: 14em;
background: url(images/2-11-test.jpg) no-repeat 2px 4px;
}
.block li{
clear: both;
margin: 0;
padding: 0;
list-style: none outside none;
width: 30px;
overflow:hidden;
white-space:nowrap;
}
.block li a{
float: left;
_display:inline;
max-width: 14em;
white-space: nowrap;
_white-space:normal;
_height:20px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
color:#333;
_background:transparent;
}
.block li span{
_position:relative;
float:left;
_display:inline;
margin-right: -99px;
padding-left: 10px;
font-size: 10px;
color:#999;
}</style>
这里是一碗汤
<ul> <li style="text-overflow:clip;">米饭三碗在这边</li> <li> </li> </ul
