CODEWITHSUNDEEP
htmlcss
DiPix
DiPix

Reputation: 6083

How to break a sentence before specific character in CSS

I have in my table sentence: 

Bill and Amount.

If the page is narrow, then the text looks like below:

Bill and
Amount

But I want to have word and in a new line like this:

Bill
and Amount

Is any way to do this without <br>, maybe using somehow custom CSS class?

Upvotes: 1

Views: 81

Answers (3)

Billy Moat
Billy Moat

Reputation: 21050

Another way to achieve this would be to use a media query.

On small devices (less that 768px) 'and Amount' will break onto a new line. On larger devices (min-width 768px) it will display all on one line.

Obviously you could change the media query to be whatever you like.

https://jsfiddle.net/ywugo35o/

Bill <span>and Amount</span>

span {
    display: block;
}

@media (min-width: 768px) {
    span {
        display: inline;
    }
}

Upvotes: 0

chazsolo
chazsolo

Reputation: 8504

You can use wbr (word break opportunity) and set white-space: nowrap on the element:

div {
  white-space: nowrap;
}
<div>
  Bill<wbr> and Amount
</div>

Note: IE 8+ does not support <wbr>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274297

you can use non breakable space like this :

Bill and&nbsp;Amount.

Upvotes: 3

Related Questions