句子自动换行（属性自动换行）

Question

当div的宽度小于此句子时，我需要保持句子不自动换行

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  word-wrap: normal;
}

<div class="ex1">
This is my sentence
</div>

问题在于，当句子包含空格时，属性overflow-x:visible或word-wrap: normal无效

Answer 1

使用white-space控制如何处理空格：

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  white-space: nowrap;
}

<div class="ex1">
  This is my sentence
</div>
<div class="ex1">
  Line breaks are suppressed here
</div>

Answer 2

我不确定您说的是不包装。

或者，该文本可能会在div的末尾消失：

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  overflow-x: hidden;
  white-space: nowrap;
}

<div class="ex1">
This is my sentence
</div>

这是通过将white-space设置为nowrap，将文本强制为不换行，然后在x轴上隐藏任何溢出（{{1} }。

或者，overflow-x: hidden可以扩展以适合文本：

div

.ex1 {
  background-color: #F0F0F0;
  width: 25%;
  white-space: nowrap;
}

如上所述，使用<div class="ex1"> This is my sentence </div>，但通过不隐藏它来允许溢出。