关灯
开启左侧

单行/多行文本显示省略号

[复制链接]
紫米 发表于 2018-11-28 11:01:22 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
今天给大家分享如何在单行和多行文本中显示省略号的方法:

1.单行文本溢出显示省略号


html代码:
  1. <font size="4"> <div>
  2.      css实现单行文本溢出省略号,css实现单行文本溢出省略号
  3.     </div></font>
复制代码



CSS代码:


  1. <font size="4"> div{
  2.    width: 200px;
  3.    height: 45px;
  4.    line-height: 45px;
  5.    overflow: hidden;
  6.    text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本。*/
  7.    white-space: nowrap;/*规定段落中的文本不会换行*/
  8.    border: 1px solid black;
  9.         }</font>
复制代码
页面效果:
QQ截图20181128110420.png


但是上面的演示属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

2.多行文本溢出显示省略号(
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端
html代码:
  1. <font size="4"><p>
  2.         css实现多行文本溢出省略号,css实现多行文本溢出省略号, css实现多行文本溢出省略号,css实现多行文本溢出省略号,
  3.         css实现多行文本溢出省略号,css实现多行文本溢出省略号, css实现多行文本溢出省略号,css实现多行文本溢出省略号,
  4. </p></font>
复制代码

css代码:
  1. <font size="4"> p{
  2.     width: 400px;
  3.     height: 65px;
  4.     border: 1px solid black;
  5.     display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
  6.     -webkit-box-orient: vertical;/*box-orient 属性指定一个box子元素是否应按水平或垂直排列*/
  7.     -webkit-line-clamp: 3;/*number用于显示的行数*/
  8.     overflow: hidden;
  9. }</font>
复制代码
页面效果: QQ截图20181128110434.png



 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )