留言
搜索 登录

CSS文字溢出问题

/ 0 评论 / 1770 阅读 /0 赞
本文阅读 2 分钟
首页 › 前端笔记 › 正文 
  1. <!DOCTYPE html>

  2. <html>

  3.     <head>

  4.         <meta charset="UTF-8">

  5.         <title></title>

  6.         <style type="text/css">

  7.             /*文字溢出问题*/

  8.             

  9.             .wordNowrap {

  10.                 width: 50%;

  11.                 height: 500px;

  12.                 margin: 0 auto;

  13.                 background: tan;

  14.             }

  15.             /*单行溢出···*/

  16.             .singleLine {

  17.                 width: 300px;

  18.                 height: 50px;

  19.                 background: teal;

  20.                 /*单行溢出···*/

  21.                 overflow: hidden;

  22.                 text-overflow: ellipsis;

  23.                 white-space: nowrap;

  24.             }

  25.             /*多行溢出···*/

  26.             .moreLine {

  27.                 width: 00px;

  28.                 height: 60px;

  29.                 line-height: 30px;

  30.                 /*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/

  31.                 background: paleturquoise;

  32.                 display: -webkit-box;

  33.                 overflow: hidden;

  34.                 -webkit-line-clamp: 2;

  35.                 -webkit-box-orient: vertical;

  36.             }

  37.             .moreLine_box{

  38.                 width: 360px;

  39.                 height: 60px;

  40.             }

  41.             /*多行后面···虚化*/

  42.             .moreLine_after {

  43.                 width: 360px;

  44.                 /*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/

  45.                 height: 60px;

  46.                 line-height: 30px;

  47.                 overflow: hidden;

  48.                 position: relative;

  49.                 background: #fff;

  50.                 padding: 30px;

  51.             }

  52.             

  53.             .moreLine_after::after {

  54.                 position: absolute;

  55.                 content: "...";

  56.                 bottom: 0;

  57.                 right: 20px;

  58.                 background: linear-gradient(left, transparent, #eee 55%);

  59.                 background: -webkit-linear-gradient(left, transparent, #eee 55%);

  60.                 background: -moz-repeating-linear-gradient(left, transparent, #eee 55%);

  61.                 background: -moz-repeating-linear-gradient(left, transparent, #eee 55%);

  62.                 padding-left: 20px;

  63.             }

  64.         </style>

  65.     </head>

  66.     <body>

  67.         <div class="wordNowrap">

  68.             <h2>文字溢出处理</h2>

  69.             <p class="singleLine">单行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二</p>

  70.             <p class="moreLine">

  71.                 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二

  72.             </p>

  73.             <div class="moreLine_box">

  74.                 <p class="moreLine_after">

  75.                     多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二

  76.                 </p>

  77.             </div>

  78.         </div>

  79.     </body>

  80. </html>
解压密码： detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理，本站不参与制作，如果侵犯了您的合法权益，请联系本站我们会及时删除。

本站发布资源来源于互联网，可能存在水印或者引流等信息，请用户自行鉴别，做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。

PHP时间对比,生成多少分钟(天/月/年)前
« 上一篇 10-08
PHP优惠码生成
下一篇 » 10-10

相关推荐

随机推荐

发表评论