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

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  id="role">
  <em ></em
  ><span >Role: </span>{{ member?.role }}
</div>
<div  id="email">
  <em ></em
  ><span >Email: </span>{{ member?.email }}
</div>
<div  id="username">
  <em ></em
  ><span >Username: </span>{{ member?.username }}
</div>
<div  id="last-update">
  <em ></em
  ><span >Last update: </span
  >{{ member?.lastUpdate | date: "short" }}
</div>
<div  id="comments">
  <em ></em
  ><span >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:

CodePudding user response：

add word-wrap: anywhere; to your div will fix the issue.

Snippet:

<div  style="word-wrap: anywhere;" id="comments">
  <em ></em
  ><span >Comments: </span>

  xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</div>

CodePudding user response：

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>