css怎么设置文字1行

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行的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！