Utilizing White-space in Bootstrap 4

Question

Utilizing White-space in Bootstrap 4

I've searched extensively for a bootstrap alternative to the CSS property

"white-space: break-spaces"

, but it seems elusive.

The issue I'm facing is that in the mobile view, the button extends beyond the screen due to the lengthy text within it.

Here's the button code:

<button class="btn btn-primary mt-3" id="send_sms_btn" type="submit">Verify &amp; Submit Withdrawal</button>

While applying the CSS property directly to the element solves the problem, I am restricted to using only Bootstrap. Any recommendations?

html css bootstrap-4

Answer 1

Answer №1

One way to address this issue is by applying the .text-break class to the button element.

<button class="btn btn-primary mt-3 text-break" id="send_sms_btn" type="submit">Verify &amp; Submit Withdrawal</button>

For more information on text breaks, click here

Answer 2

One way to address this issue is by applying the .text-break class to the button element.

<button class="btn btn-primary mt-3 text-break" id="send_sms_btn" type="submit">Verify &amp; Submit Withdrawal</button>

For more information on text breaks, click here

Answer 3

Answer №2

<style>    
button.wrap {
          white-space: nowrap; 
          width: 100%; 
          overflow: hidden;
          text-overflow: ellipsis; 
          border: 1px solid #000000;
}
</style>

Insert the above style into your css file or within the head tag of your HTML document.

 <button class="btn btn-primary mt-3 wrap" id="send_sms_btn" type="submit">Verify &amp; Submit with an excessively long text that wraps nicely</button>

Apply the wrap class to your button element in order to prevent it from going off-screen. Give it a try and hopefully this will resolve the issue.

Answer 4

<style>    
button.wrap {
          white-space: nowrap; 
          width: 100%; 
          overflow: hidden;
          text-overflow: ellipsis; 
          border: 1px solid #000000;
}
</style>

Insert the above style into your css file or within the head tag of your HTML document.

 <button class="btn btn-primary mt-3 wrap" id="send_sms_btn" type="submit">Verify &amp; Submit with an excessively long text that wraps nicely</button>

Apply the wrap class to your button element in order to prevent it from going off-screen. Give it a try and hopefully this will resolve the issue.

Utilizing White-space in Bootstrap 4

Answer №1

Answer №2

Similar questions

No adjustment in color upon switching themes

Why is my navbar not functioning properly with Bootstrap 5 and HTML?

There was an issue compiling the file static/css/main.b6d8a2cb.css with the Css Minimizer plugin. An error occurred: TypeError - Unable to modify properties of undefined (setting 'value')

How to create a stylish border line to separate rows using CSS

Creating an array using Vue.js

Was unable to maintain the default state of the button as clicked

Erase the Japanese content from the input

Set the <img> source to link to a PHP webpage

Center two elements within a div container both horizontally and vertically

I am having trouble getting my textarea to accept width attributes

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

To ensure proper loading of Bootstrap assets, it is necessary to place the assets folder within the public

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Difficulty displaying background image on iOS devices like iPhone and iPad

Modifying an image in a particular row of a table generated using the *ngFor loop in Angular

How can you vertically center an icon button in Material UI?

How to Place Content Below a Fixed Navigation Bar?

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Display user input within a modal dialogue box

Discovering the Nearest Textfield Value Upon Checkbox Selection Using JQuery