Question

我有一个div，它会根据父div的宽度更改宽度。这是为了创建响应能力：当屏幕宽度减小时，该宽度也会随之变化。

问题：当屏幕宽度减小时，文本会不断变化，就像溢出的单词发送到新行一样（当然，这是因为宽度是父div的原因，所以是可变的。

如何防止这种情况发生？它像创建固定宽度的父div一样简单，还是有其他解决方案？谢谢

CSS

div.parDiv {
width:80%;
margin-left:10%;
}

HTML

<div class="parDiv">
    <p class="text">This is some long text that breaks onto the next line when reducing the screen width</p>
</div>

Answer 1

从您的问题中尚不清楚您要确切实现什么，但是如果您希望文本不再自动换行，请使用white-space: nowrap：

div.parDiv {
  width:80%;
  margin-left:10%;
  white-space: nowrap;
}

<div class="parDiv">
    <p class="text">This is some long text that breaks onto the next line when reducing the screen width</p>
</div>

<div class="parDiv">
    <p class="text">This is some long text that breaks onto the next line here<br/>
    because of the break element included</p>
</div>

我应该指出，一旦文本容器的宽度小于文本宽度，文本就会溢出它的容器，因此您可能要使用min-width规则来防止这种情况。

如何防止段落文本中断到下一行

1 个答案: