如何使用 Bootstrap 或 CSS 制作响应式文本？

Question

我尝试将 Bootstrap 4.3.1 中的 $enable-responsive-font-sizes 变量设置为 true，但没有任何改变。

这是我的 template.html 代码：

    <div class="m-2" id="role">
  <em class="fas fa-user-tie fa-fw mr-2"></em
  ><span class="font-weight-bold">Role: </span>{{ member?.role }}
</div>
<div class="m-2" id="email">
  <em class="fas fa-at fa-fw mr-2"></em
  ><span class="font-weight-bold">Email: </span>{{ member?.email }}
</div>
<div class="m-2" id="username">
  <em class="fas fa-file-signature fa-fw mr-2"></em
  ><span class="font-weight-bold">Username: </span>{{ member?.username }}
</div>
<div class="m-2" id="last-update">
  <em class="fas fa-clock fa-fw mr-2"></em
  ><span class="font-weight-bold">Last update: </span
  >{{ member?.lastUpdate | date: "short" }}
</div>
<div class="m-2" id="comments">
  <em class="fas fa-comments fa-fw mr-2"></em
  ><span class="font-weight-bold">Comments: </span> {{ member?.surcomments }}

  xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</div>

我的 scss 文件：

    $enable-responsive-font-sizes: true;


@import "../../../../../assets/bootstrap-4.3.1/dist/css/bootstrap.css";

桌面版：

手机版，文字无响应：

Answer 1

将word-wrap: anywhere; 添加到您的div 将解决此问题。

片段：

<div class="m-2" style="word-wrap: anywhere;" id="comments">
  <em class="fas fa-comments fa-fw mr-2"></em
  ><span class="font-weight-bold">Comments: </span>

  xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</div>

Answer 2

您的文本没有移动到下一行的原因是您有一长串完整的文本。如果您使用正常长度的单词，即使没有引导程序，文本也会正确换行。见下文：

<div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus augue, pulvinar sed lacinia eu, fringilla et ex. Fusce sit amet velit eget dui dignissim ornare. Nunc hendrerit velit id ante maximus, ut sollicitudin massa scelerisque. Duis eget elementum justo. Aenean non nisi in odio feugiat faucibus at et sapien. Pellentesque ac elit vestibulum mauris consectetur tempor. Etiam sagittis tellus ut neque blandit mollis. Quisque et sagittis ex, rhoncus egestas ante. Mauris imperdiet velit erat, lacinia imperdiet nunc ultricies eget. Ut posuere rhoncus finibus. Sed vestibulum dolor id efficitur tincidunt. Etiam ac elit at diam finibus cursus. Aenean augue mi, tempor vestibulum mi at, egestas bibendum massa. Nullam ornare, nunc in volutpat tincidunt, erat enim consectetur nunc, vel sodales est lectus id mi.
</div>

如果您的应用确实需要一长串不间断的文本，您需要使用 CSS 将单词“换行”（将其移至下一行），您可以为此使用属性 overflow-wrap：

<span style="overflow-wrap: break-word">
  xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</span>