未经允许,不得转载!
水平有限,欢迎指正、交流!
源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css截取字符串</title> <style type="text/css"> *{padding: 0;margin: 0;font-family: "微软雅黑"} h3{margin: 15px 0;text-align: center;} .demo{ margin: 15px 0 30px 0; } div.demo1{ width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* 显示省略符号来代表被修剪的文本 IE/Safari */ -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis;/* Opera */ -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ } div.demo2{ line-height: 22px; position: relative; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; color: #4b566a; height: 44px; } </style> </head> <body> <h3>css截取字符串</h3> <div class="demo demo1">这是方法一这是方法一这是方法一这是方法一这是方法一这是方法一这是方法一</div> <div class="demo demo2">这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二这是方法二</div> </body> </html>
整理后寻找方便,也希望对路过的您有一点点帮助!!