Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

I attempted to enable responsive font sizes in Bootstrap 4.3.1 by setting the $enable-responsive-font-sizes variable to true, but I did not see any changes.

Below is the code from my template.html file:

    <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>

Here is a snippet of my scss file:

    $enable-responsive-font-sizes: true;


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

This is how it looks in the desktop version:

https://i.stack.imgur.com/RgCtR.jpg

However, in the mobile version, the text does not appear to be responsive as expected:

https://i.stack.imgur.com/BvQpB.jpg

cssangularbootstrap-4responsive

Answer №1

To resolve the issue, simply include word-wrap: anywhere; in your div CSS.

Here is a snippet to illustrate: 

<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

If your text is not moving to the next line, it may be because of a long string of unbroken text. Try using words of normal length and the text should wrap correctly without needing bootstrap. Take a look at the example 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 you do require a long continuous line of text in your app, you can use CSS properties to make sure the word wraps to the next line. One option is to use overflow-wrap property like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: Kindly update your dependencies to the latest version of core-js@3

When trying to execute npm start, I encountered an error stating "An unhandled exception occurred: Could not find module "@angular-devkit/build-angular". I attempted to resolve this by installing it using npm install @angular-devkit/build-angular, but the ...

angularnpmangular-cli

Encountering difficulty verifying custom-radio in bootstrap 4 using Parsley.js

I am currently using parsley for form validation on my <input> and <select> elements, and it is working perfectly. However, I am facing some issues when working with <input type="radio">. The problem is that only one option is being highl ...

htmlbootstrap-4parsley.js

Successful build of node app, however, not appearing on Heroku for MEAN Stack application

After numerous failed attempts, I finally managed to successfully build and deploy my app on Heroku. However, when I tried to access it, all I got was an 'Application error'. The log for the successful build is as follows: -----> Node.js app d ...

node.jsangularherokudeploymentmean-stack

The AnimationRendererFactory ahead-of-time (AOT) compilation is encountering an issue where it is unable to access the property 'create

I am encountering an issue while trying to compile my Angular4 app AOT. The error message that I am stuck on is: TypeError: Cannot read property 'createRenderer' of undefined at AnimationRendererFactory.createRenderer (http://localhost:8080/cwp/ ...

angular

Children must be matched to the route before navigating to it

Hello there! I'm having trouble understanding how to navigate new routes with children in Angular 2 rc 4. I'm trying to route to the TestComponent, which has a child, but I keep getting an error message saying "cannot match any route 'test&a ...

typescriptangular

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

htmlcsstwitter-bootstrappopup

Changing the text link color on IOS can be achieved by modifying the CSS properties

Recently, I encountered an issue with the text link color of my website. While I had set the link color to red for desktop view, it inexplicably changed to blue when viewed on an iPhone. Even after trying to use !important, the problem persisted. Can som ...

htmlcss

Optimizing the position of smart info windows in Google Maps

I am facing a challenge while attempting to switch the infowindow in Google maps to the smartinfowindow, as the position of the infowindow appears incorrect. This issue only occurs with the smartinfowindow and not with the standard infowindow. Upon furthe ...

javascriptcssgoogle-mapsinfowindow

Dropdown within Datatable does not automatically select the bound option [PrimeNG]

Hey there! I'm a trainee just entering the world of frontend development, so apologies in advance if my question seems silly or if my code looks messy (any corrections are greatly appreciated). In my project, I have a Dropdown element inside a Datata ...

angulardrop-down-menudatatableprimeng

Troubleshooting Problems with Positioning and Floating in HTML and CSS

I'm facing some challenges with clearing floats (or it could be something else?). My goal is to have the #newsbar div free from the previous floats so that its width can extend 100% across the page/browser. I believe I've tried everything within ...

htmlcss

Multiple invocations of the callback function in an Angular5 template binding

In trying to create a grid component that uses structured data containing definitions for columns and an array of data. Each column definition includes a callback function to customize the display of that specific column's value. Within each callbac ...

angularangular5angular-template

Creating a capsule-shaped button using HTML and CSS:

I'm trying to create a button that mimics the design in the code snippet. Is this method the most effective way, or is there a simpler approach I should consider? It seems like a lot of work just to achieve rounded corners. #p1,#p2{ height:25px; ...

htmlcss

Center an image both vertically and horizontally within an Owl Carousel arrow slider

I have set up an owl carousel on my page with a customized arrow positioned next to the slider. Currently, it looks like this: https://i.stack.imgur.com/gCfM0.png My goal is to vertically align the arrows and make sure the left arrow is aligned to the le ...

htmlcsstwitter-bootstrap

What could be causing my divs to overlap?

I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...

htmlcss

The button effortlessly transforms into a sleek email submission form

I have a button that is already styled with basic CSS properties for active and hover states. I would like to add functionality so that when the "Join the Loop" button is clicked, it transforms into a simple email form similar to the one found at Apologie ...

javascriptjqueryhtmlcss

Just starting out with CSS and coding. Setting up radio buttons and divs for a simple beginner's gallery

One challenge that perplexes me is how to reposition the concealed divs below the radio buttons with labels. Check out my HTML here View my CSS code here /*color palette: abls [lightest to darkest] #eeeeee #eaffc4 #b6c399 ...

htmlcssflexboxradio-buttonposition

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

javascriptangulartypescriptkeycloak

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

javascripthtmlangularionic4

How to resolve the issue of "NGUniversal window is not defined"

I have a newer version of Angular in my application and recently integrated ng-universal. When I attempt to run the command npm run dev:ssr, an error is thrown with the message: ERROR ReferenceError: window is not defined This error originates from a li ...

angularangular-universal

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

javascriptangulartypescriptnpmangular-cli