css怎么设置文字1行

css设置文字1行的方法：首先设置“inline-block;”属性；然后通过“wh IT e -s pace: nowra p; ”属性实现文字强制不换行；最后实现隐藏超出部分即可。

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

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

CSS 设置文字只显示一行

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

【推荐：css视频教程】

附：显示两行

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

以上就是css怎么设置文字1行的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css怎么设置文字1行 全部内容，希望文章能够帮你解决 css怎么设置文字1行 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css怎么设置文字1行的详细内容...