css怎么把三段文字设为一行

可以使用浮动或者inline-block属性来实现将三段文字放在同一行。具体代码可以如下所示：

使用浮动：

<div>
  <p style="float: left;">Text 1</p>
  <p style="float: left;">Text 2</p>
  <p style="float: left;">Text 3</p>
</div>

使用inline-block：

<div>
  <p style="display: inline-block;">Text 1</p>
  <p style="display: inline-block;">Text 2</p>
  <p style="display: inline-block;">Text 3</p>
</div>

同时需要对父元素设置宽度，保证三个元素的总宽度不超过父元素宽度才能实现在同一行显示。

相关问题

css怎么把三段文字设为一行并且居中

可以使用flex布局将三段文字放在同一行并水平居中。

HTML代码：

<div class="container">
  <p>第一段文字</p>
  <p>第二段文字</p>
  <p>第三段文字</p>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}
.container p {
  margin: 0;
}

其中 `justify-content: center;` 表示水平居中， `align-items: center;` 表示垂直居中。 `margin: 0;` 用于去除段落标签的默认边距。

css 省略号 三行

要在CSS中实现省略号显示三行文字，可以使用以下代码：

div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述代码中，我们将`display`属性设置为`-webkit-box`，这会将元素作为一个弹性容器显示。然后，我们使用`-webkit-line-clamp`属性将显示的行数限制为3行。最后，我们使用`text-overflow`属性设置文字溢出时的省略号样式为ellipsis（省略号）。

这样，当文字超出三行时，将会在第三行结束处显示省略号。

请注意，这段代码使用了WebKit引擎的私有属性，所以只在支持WebKit引擎的浏览器中生效。如果需要兼容其他浏览器，可以考虑使用更通用的解决方案，如使用JavaScript来计算行数并添加省略号。

参考资料：
- https://www.w3schools.com/css/css3_text_effects.asp<span class="em">1</span><span class="em">2</span>