javascript - 如何让每个p中的文字呈两行显示,超出部分以省略号结束,是两行,两行,重要的事情要说3遍
PHP中文网
PHP中文网 2017-04-11 10:52:46
[JavaScript讨论组]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{padding:0; margin:0; list-style:none;}
.box{ width:400px; border:1px solid #ccc; margin:20px auto;}
</style>
<body>
<p class="box">
  <p>娱乐圈一向是卧虎藏龙之地,今天扒十位明星富二代,本来都是家世良好的帅哥靓女,偏偏要来娱乐圈闯荡,更让人敬佩的是,个个还都闯出了一条星光大道。值得点赞!奶茶妹妹</p>
  <p>娱乐圈一向是卧虎藏龙之地,今天扒十位明星富二代,本来都是家世良好的帅哥靓女,偏偏要来娱乐圈闯荡,更让人敬佩的是,个个还都闯出了一条星光大道。值得点赞!奶茶妹妹</p>
  <p>娱乐圈一向是卧虎藏龙之地,今天扒十位明星富二代,本来都是家世良好的帅哥靓女,偏偏要来娱乐圈闯荡,更让人敬佩的是,个个还都闯出了一条星光大道。值得点赞!奶茶妹妹</p>
  <p>娱乐圈一向是卧虎藏龙之地,今天扒十位明星富二代,本来都是家世良好的帅哥靓女,偏偏要来娱乐圈闯荡,更让人敬佩的是,个个还都闯出了一条星光大道。值得点赞!奶茶妹妹</p>
  <p>娱乐圈一向是卧虎藏龙之地,今天扒十位明星富二代,本来都是家世良好的帅哥靓女,偏偏要来娱乐圈闯荡,更让人敬佩的是,个个还都闯出了一条星光大道。值得点赞!奶茶妹妹</p>
</p>
</body>
</html>
PHP中文网
PHP中文网

认证0级讲师

全部回复(2)
伊谢尔伦

可以看看张大大的这篇文章:
关于文字内容溢出用点点点(…)省略号表示

天蓬老师
.box p{ 
        width:400px; 
        border:1px solid #ccc;
         margin:20px auto;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
}
       
        
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号