多行文本溢出
来源：互联网 发布：java中的wait 编辑：程序博客网 时间：2024/04/30 00:51
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 标题</title>
<META charset="utf-8">
<script type="text/javascript" src="http://h5rsc.vipstatic.com/lefeng_pc/js/jquery/jquery.pack.js?20150916"></script>
<style type="text/css">
#demo4-one{
width:150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#demo4-two{
width:150px;
display:-webkit-box !important;
overflow:hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
/*显示两行，如果显示3行再溢出则改写成 -webkit-line-clamp:3;*/
-webkit-line-clamp:2;
}
</style>
</head>
<body>
<div id="demo4-one">
单行溢出，ddffffffffffffffffffff
</div>
<div id="demo4-two">
多行文本溢出，多行文本溢出，多行文本溢出，多行文本溢出，多行文本溢出，多行文本溢出，
</div>
</body>
<html>
<head>
<title>Bootstrap 实例 - 标题</title>
<META charset="utf-8">
<script type="text/javascript" src="http://h5rsc.vipstatic.com/lefeng_pc/js/jquery/jquery.pack.js?20150916"></script>
<style type="text/css">
#demo4-one{
width:150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#demo4-two{
width:150px;
display:-webkit-box !important;
overflow:hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
/*显示两行，如果显示3行再溢出则改写成 -webkit-line-clamp:3;*/
-webkit-line-clamp:2;
}
</style>
</head>
<body>
<div id="demo4-one">
单行溢出，ddffffffffffffffffffff
</div>
<div id="demo4-two">
多行文本溢出，多行文本溢出，多行文本溢出，多行文本溢出，多行文本溢出，多行文本溢出，
</div>
</body>
</html>
兼容谷歌
0 0
- 多行文本溢出
- 多行文本溢出
- 单行,多行文本溢出
- 多行文本溢出省略号
- 单、多行文本溢出
- 多行文本溢出显示省略号...
- 多行文本溢出显示省略号…
- css3 多行文本 溢出 省略号
- WebKit多行文本溢出显示省略号(...)
- 多行文本溢出显示省略号
- 多行文本溢出用省略号表示
- 单行/多行文本溢出，显示省略号
- 单行/多行文本溢出处理
- 单行或多行文本溢出
- css多行文本溢出显示省略号...
- Css 多行文本溢出隐藏...
- css3 多行文本溢出省略号
- css3 多行文本溢出显示省略号
- UIScrollViewDelegate 详解
- MySQL Range Optimization
- MySQL索引下推技术
- 支付宝双功能接口使用
- MyCAT ER分片的验证
- 多行文本溢出
- MySQL常见错误
- 1089. Insert or Merge (25)
- [置顶]Linux碎碎念
- [置顶]Oracle碎碎念~1
- [置顶]Shell碎碎念
- 8个方法让你成为更优秀的程序员
- 仿EventBus自己写的android事件传递者EventMailer
- MyBatis CRUD Demo
