1.单行文本添加省略号
一般用于新闻列表展示
li{
width: 200px;
height: 30px;
line-height: 30px;
cursor: pointer;
list-style-position: inside;/*将列表图标位置设置为inside,默认outside,overflow值为hidden时会截取掉*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
小tip:为添加省略号的文本标签添加title属性,值为完整文本,当用户鼠标停留在该文本时,会显示完整内容。
核心代码:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow 溢出
值:
visible:元素的内容在元素框之外也可见(溢出内容不被剪裁)
hidden:元素的内容会在元素框的边界处剪裁,并且超出剪裁区域的内容不可见
scroll:元素的内容会在元素框的边界处剪裁,但浏览器会显示滚动条以便查看其余的内容
auto: 如果内容