How to make a responsive text with Bootstrap or CSS? - css

Question

I tried to set the $enable-responsive-font-sizes variable in Bootstrap 4.3.1 to true, but nothing changed.
Here is my template.html code:
<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>
My scss file:
$enable-responsive-font-sizes: true;
#import "../../../../../assets/bootstrap-4.3.1/dist/css/bootstrap.css";
Desktop version:
Mobile version, the text is not responsive:

Answer 1

add word-wrap: anywhere; to your div will fix the issue.
Snippet:
<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

The reason your text is not moving to the following line is because you have a long unbroken string of text. If you use words of normal length, the text will wrap correctly, even without bootstrap. See below:
<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>
If your app really needs a long uninterrupted line of text, you need to use CSS to "wrap" the word (move it to the next line), you can use the property overflow-wrap for this:
<span style="overflow-wrap: break-word">
xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</span>