CSS字数超出自动添加省略号,纯数字换行
2018-03-08 17:38
941 查看
效果图
代码
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS字数超出自动添加省略号,纯英文、数字换行问题</title> <style type="text/css"> .ellipsis { width: 200px; height: 200px; background-color: #f3f3f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wrap1 { width: 200px; height: 200px; margin-top: 22px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; background-color: #f3f3f3; } .wrap2 { width: 200px; height: 200px; margin-top: 22px; white-space: pre-wrap; word-wrap: break-word; word-break: break-word; background-color: #f3f3f3; } </style> </head> <body> <div class="ellipsis">省略号:121121212121212121212121212121212121212121212222222222222222222222222111111111111111</div> <div class="wrap1">换行:121121212121212121212121212121212121212121212222222222222222222222222111111111111111</div> <div class="wrap2">换行:121121212121212121212121212121212121212121212222222222222222222222222111111111111111</div> </body> </html>
相关文章推荐
- CSS实现div添加过长的英文字母或数字的内容显示一排而溢出时,进行自动换行
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等
- CSS实现div添加过长的英文字母或数字的内容显示一排而溢出时,进行自动换行
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- css文本超出部分省略号&CSS强制换行总结
- CSS实现连续数字和英文的自动换行的方法
- css 英文换行 css(word-wrap/break)使纯英文数字自动换行
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
- css限制显示字数,文字长度超出部分用省略号表示 只显示一行
- 用CSS将长英文字母数字自动换行
- 使用CSS自动截取字符长度并添加为省略号
- css实现超出区域字符串不换行、自动换行、强制换行
- css超出一行添加省略号属性:text-overflow和white-space
- CSS解决无空格太长的字母,数字不会自动换行的问题
- css超出一行添加省略号属性:text-overflow和white-space
- css 解决英文字符与阿位伯数字自动换行
- css限制显示字数,文字长度超出部分用省略号表示
- CSS设置文字不换行,超出字数用...显示