css超出部分省略号显示文字,css超出部分显示省略号

1年前 (2024-04-23)

H5代码：

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width: 200px; background-color: #aaa; } .p1{ white-space: nowrap; } .p2{ word-wrap: break-word; } .p3{ word-break: break-all; } .p4{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body><p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p><p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p><p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p><p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p></body></html>

属性：

p{ white-space: nowrap;}

2、自动换行：word-wrap属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象；

属性：

p{ word-wrap: break-word;}

3、强制断行：word-break 属性用来标明怎么样进行单词内的断句；

属性：

p{ word-break: break-all;}

4、溢出显示省略号：ext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串；

css