CSS多行文本省略

1.在文本内容过长时,做折行并省略显示,效果如下

PYX20N0FO3`(BCG{(2{QFSC.png

css参考如下:

  .comment_inner{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 3; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
    }   

2.长段内容自动换行显示方法:
style={{whiteSpace: 'normal', wordWrap: 'break-word'}}

推荐阅读更多精彩内容

  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,046评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 991评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,077评论 0 11
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 4,188评论 2 2
  • 这样人生是不是已经输了? 文:张宗超 与读者书: 建议摆脱看小说的思维模式来看我的文字,有些内容需要你反复思考和咀...
    宗超説阅读 59评论 0 0