CSS设置不转行:
overflow:hidden
隐藏
white-space：normal
默认
pre
换行和其他空白字符都将受到保护
nowrap
强制在同一行内显示所有文本，直到文本结束或者遭遇
br
对象
例，强制不换行
代码如下
div{
white-space:nowrap
}
\x0d\x0adiv{width:300pxborder:1px solid redmargin:10pxoverflow:hidden}\x0d\x0a.nowrap{white-space:nowrap}\x0d\x0a\x0d\x0a这是一段很长的文字，中间没有空格，也没有换行，它不会自动换行直到被截取掉\x0d\x0a这是一段很长的文字，中间没有空格，也没有换行，但它会自动换行\x0d\x0a\x0d\x0a上面两个div里超宽的文字，第一个里面的被禁止换行，然后超宽的被截取了；第二个不做设置，于是自动换行了。whitespace:nowrap
中文行末不断行显示
overflow：
控制超出文本的显示方式：hidden 超出范围文本隐藏；scroll 始终显示滚动条；auto 根据文字多少自动显示滚动条
text-overflow：
在overflow设置隐藏的情况下怎么显示
clip裁剪ellipsis省略号显示
那么让多余文字省略号显示需要以下三步：
①white-space：nowrap如果是中文 设置文字超出范围不断行
②overflow：hidden；设置超出控件范围隐藏；
③text-overflow：ellipsis设置多余文本隐藏显示；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px
height: 100px
background-color: green
}
li{
color: red
list-style: none
}
.li{
color: blue
font:italic bold 75%/1.8 "Microsoft Yahei",san-serif
font-weight: lighter
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
}
</style>
</head>
<body>
<div>
<ul>
<li class="li">第一项第一项第一项第一项第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</div>
</body></html>
