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

What is the best method for applying a gradient color to the parent class in CSS using pseudo classes (before and after)?

"Is there a way to overlay gradient colors on pseudo-classes (before and after) while working with parent classes in CSS? I am attempting to create arrow shapes using div elements and the 'after' class. The div's background color consis ...

htmlcss

Ways to Design ASP.NET Buttons for Users with Disabilities

Recently, I attempted to style an asp button using CSS. The Button HTML: <asp:Button ID="btnClockin" runat="server" Text="Clock In" class="FullWidthButton" /> Here is the CSS code: .FullWidthButton {width:100%;} Everything was working fine until ...

asp.netcss

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

Anglar2-useful-swiper does not automatically advance slides

I've been working on integrating the angular2-useful-swiper plugin into a single page application for image display, complete with auto rotation. However, I'm encountering an issue where the images are not transitioning as they should, and instea ...

angular

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

javascriptcssangularjs

Preserve the original color of links in CSS by using the `a

Is it feasible to specify in CSS that a link should not change its color and instead use the default one? For example: If I have text displayed in red, and that text is also a hyperlink. Typically, when clicked on, the text would change to blue because i ...

htmlcsshyperlink

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

Objective subject for an element within a :not operation

I have a function that specifically excludes a style on links by targeting their IDs. Each of my links has an ID, so I use that to exclude the style. a:not([id='hopscotch_logo'] { color: red; } Now, I also want to find links that are children o ...

javascriptjqueryhtmlcss

The properties are absent in Angular Service - Observable

I recently started learning angular and I'm struggling to make this HTTP get request work. I have been looking at various examples of get requests for arrays and attempted to modify one for a single object (a user profile) but without success. The err ...

angulartypescripthttp

Executing a method of another component in Angular2

In my Angular2 application, I have created a Header component that is rendered within the main App component. Now, I am faced with the challenge of placing a submit button from another Form component into the Header. How can I achieve this? I find myself ...

angular

Changes on services do not affect the Angular component

Currently facing an issue with my Angular assignment where changing an element's value doesn't reflect in the browser, even though the change is logged in the console. The task involves toggling the status of a member from active to inactive and ...

javascripthtmlangulartypescript

What strategies can I implement to reduce the size of my Angular application to 500K or less?

I have been researching ways to reduce the size of my Angular application, but have not yet found a solution that significantly decreases its size. Currently, my application is 4M in production and 14M in development. So far, I have tried: Lazily loadin ...

angularnpm

Make sure to always keep all stars contained within a div element

How can I keep five stars inside a div even when the screen size is small? I have created a div with an image and I want to place five stars within that div. However, as I reduce the size of the screen, the stars come out of the box. Is there a way to en ...

angulartypescript

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

htmlcss

Retrieving data from child components within an array in another component using Angular

How can I assign the value of the variable 5 in Array(5) to another variable in this code? My goal: export class HelloComponent { @Input() page: number; active = 0; pages; constructor() { this.pages = Array(this.page) // instead of Array( ...

angulartypescriptangular-materialpaginationpipe

Creating a new route path in Angular 2 using the Router

Can you explain the difference between the analog deprecated-router method generate in the new Router 3.0.0? In the past, it was written like this: this._router.generate(['Profile']).urlPath; How is it done with the new router version? ...

angularangular-routing

When trying to run the npm start command, an error occurs referencing type

I am facing difficulties running my project locally due to broken dependencies, and I'm struggling to find a solution. When attempting to install the node modules, I encountered errors, so I made changes to the following dependencies: "codelyze ...

angularnpmlodashnpm-start

housing the picture within a CSS grid

I am new to working with css grids and I have encountered an issue. The background image I want to use is larger than the size of the grid itself. How can I make the image fit within the grid without exceeding its boundaries? When I attempt to insert the ...

htmlcsscss-grid

Positioning the video tag bar in HTML is a crucial element to

**Take a look at what I'm discussing here(http://jsfiddle.net/VpLyR/). I'm dealing with a simple code that includes a video tag (html) and a menu bar with a fixed position. The issue arises when I scroll down to the point where both the menu bar ...

htmlcsspositionhtml5-video

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

javascriptjqueryhtmlcss