• 技术文章 >web前端 >css教程

    css怎么设置文字1行

    藏色散人藏色散人2021-02-24 10:09:53原创39

    css设置文字1行的方法:首先设置“inline-block;”属性;然后通过“white-space: nowrap;”属性实现文字强制不换行;最后实现隐藏超出部分即可。

    本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

    CSS 设置文字只显示一行,多余显示省略号

    CSS 设置文字只显示一行

    .view-text{
      /**
    思路:
    1.设置inline-block属相
    2.强制不换行
    3.固定高度
    4.隐藏超出部分
    5.显示“……”
      */
      display: inline-block;
      white-space: nowrap; 
      width: 100%; 
      overflow: hidden;
      text-overflow:ellipsis;
    }

    【推荐:css视频教程

    附:显示两行

    <div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
    /**
    思路:
    1.超出的文本隐藏
    2.溢出用省略号显示
    3.溢出不换行
    4.将对象作为弹性伸缩盒子模型显示
    5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
    6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
      */
      .text2{
    width:200px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    }

    以上就是css怎么设置文字1行的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:深入了解CSS属性*-gradient的使用技巧 下一篇:使用CSS3实现简单时间轴效果(附代码)
    第15期线上培训班

    相关文章推荐

    • CSS层样式表有哪几种类型• css中width什么意思• css最大的优点是什么• css怎么设置水平对齐• 深入了解CSS属性*-gradient的使用技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网