快捷搜索:  汽车  科技

css设置文字超出部分用省略号代替:溢出文字省略号

css设置文字超出部分用省略号代替:溢出文字省略号

实现效果:

css设置文字超出部分用省略号代替:溢出文字省略号(1)

实现代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li { /* 设置列表项目相关内容 */ list-style: none; width: 200px; height: 30px; /* 设置对象的行高。 height: 30px;line-height: 30px;垂直居中 */ line-height: 30px; /* 设置对象边框的特性 */ border: 1px solid pink; /*1.强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行 */ white-space: nowrap; /* 2.超出的部分隐藏 */ overflow: hidden; /* 3.溢出的部分用省略号替代 */ text-overflow: ellipsis; } </style> </head> <body> <ul> <li>1.强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。</li> <li>2.超出的部分隐藏。</li> <li>3.溢出的部分用省略号替代。</li> </ul> </body> </html>

猜您喜欢: