最好是用块级元素,父级必须得有个宽度,如果不设置,列如移动端会出现横向滚动条
举例:
<div class='box'><h1>标题信息</h1>
<p>内容描述</p>
</div>
<style>
.box{width:100%}
.box h1{overflow:hiddentext-overflow:ellipsiswhite-space:nowrap}
</style>
white-space:nowrap //代表文字不自动换行
overflow:hidden //代表溢出隐藏
text-overflow:ellipsis //代表溢出省略号
很好用的,一般只设置溢出隐藏会出现截取一般的字,用这个属性就不会了,溢出会出现...
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>