[分享]css中如何让文字横排显示不出来

在CSS中，我们可以使用whitespace属性来控制文本的换行和空格。通过设置whitespace:nowrap，我们可以让文本不换行，从而实现文字横排显示。p { whitespace: nowr...

在CSS中，我们可以使用white-space属性来控制文本的换行和空格。通过设置white-space:nowrap，我们可以让文本不换行，从而实现文字横排显示。

p {
  white-space: nowrap;
} 

另外，我们还可以使用text-overflow属性来控制文本超出容器范围时的显示方式。一般情况下，文本溢出容器会被省略号“...”代替。但如果我们希望溢出的文本不被省略掉，而是显示在容器外部，可以设置text-overflow为clip或者unset。

p {
  white-space: nowrap;
  text-overflow: clip;
} 

需要注意的是，text-overflow属性在大部分浏览器中无法与white-space:nowrap同时使用，因此需要使用特定的浏览器厂商前缀来实现。

p {
  white-space: nowrap;
  overflow: hidden;
  -webkit-text-overflow: clip;
  -moz-text-overflow: clip;
  text-overflow: clip;
} 

通过以上方法，我们就可以在CSS中实现让文字横排显示不出来的效果了。