gpt4 book ai didi

html - Bootstrap 如何让文本无响应但在 div 内?

转载 作者:行者123 更新时间:2023-11-28 14:22:23 25 4
gpt4 key购买 nike

在移动设备中文本是这样的:

enter image description here

但我需要它保持这样:

![enter image description here

我使用的代码:

<div class="container-fluid">
<div class="row" style="background-color:#071885;">
<div class="col-md-12 text-center">
<h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
</h1>
</div>
</div>
</div>

我已经尝试过 no-wrap 但没有用。

更新:

@库库兹

enter image description here

最佳答案

你可以为此使用 flexbox:

  1. 在行上设置 display: inline-flex 并利用 内联元素将扩展到其内容 的事实。

  2. 现在您可以使用 text-nowrap 类或 white-space: nowrap 来获得您需要的效果 - 请参见下面的演示:

.row {
display: inline-flex; /* ensures the text stays inside */
white-space: nowrap;
min-width: 100vw; /* sets 100% width in desktop */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
<div class="row" style="background-color:#071885;">
<div class="col-md-12 text-center">
<h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
</h1>
</div>
</div>
</div>

关于html - Bootstrap 如何让文本无响应但在 div 内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55068410/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com