使用CSS,如果文本在其他情况下根本不会中断,我如何才能强制文本在某个点中断?

vohkndzv  于 2023-03-14  发布在  其他
关注(0)|答案(1)|浏览(123)

我有一些文本,理想情况下应该显示为两行。使用<br>元素获得这种行为是很简单的:

div {
  font-family: "Helvetica Neue", Arial;
  font-size: 3rem;
}
<div>
    This is some text<br>
    Should be >1 line
</div>

然而,在小屏幕宽度下,这会导致一些看起来很难看的虚线:

我更希望它以尽可能紧凑的方式 Package (因为它没有<br>元素),而不是这样做,我可以设置容器的最大宽度为最长文本行的长度:
一个二个一个一个
但这使得我的CSS依赖于正在使用的字体/大小/文本,这是不理想的(我可以用客户端JS计算这个数字,但我觉得应该有一个不那么笨拙的方法来做到这一点)。
我怎样才能只使用CSS而不使用幻数来获得想要的行为呢?

unftdfkk

unftdfkk1#

您可以编写介质查询,也可以使用 Bootstrap 。
按媒体查询:

<div>
        This is some text<br>
        Should be >1 line
    </div>

还有

@media (max-width:575px) { br { display: none; }

通过Bootstrap:

<div>
    This is some text<br class="d-none d-sm-block">
    Should be >1 line
</div>

相关问题