White-space property for Bootstrap 4

Question

I've been trying to find the bootstrap equivalent of the CSS property "white-space: break-spaces" but I can't seem to find one.

My problem is that in the mobile view of my screen, the button goes out of the view since the text in it is long.

This is my button

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

CSS property applied to the element works fine but I can only use bootstrap. Any suggestions?

Answer 1

Try adding the .text-break class to the button

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

Text break reference Link

Answer 2

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

Add this style in css file or head tag.

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

use overflow class in button. It will not go out of the screen. Let's try. Hope will solve issue.