如何使用引导带或CSS生成响应性文本？

Question

我试图将Bootstrap 4.3.1中的$enable响应字体大小变量设置为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>

​