如何设置文本不换行省略号显示等CSS常用文本

html-css019

如何设置文本不换行省略号显示等CSS常用文本,第1张

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>

强制不换行

div{

white-space:nowrap

}

自动换行

div{

word-wrap: break-word

word-break: normal

}

强制英文单词断行

div{

word-break:break-all

}