CODEWITHSUNDEEP
javascriptjquerycss
Eddy
Eddy

Reputation: 566

Line break forced at specific character

I would like to have a line break forced at the just before the "+" character, if possible using css styling, or otherwise in a different way. Is this possible?

#myDiv{
  width: 80%
  }


#myP{
  color: blue;
  font-family: arial;
  font-size: 3em;
  font-weight: 900;
  line-height: 1.5em;
  }
  
<div id="myDiv">
  <p id="myP">Potatoes, peas, carrots, corn, beans, butter + meat, gravy, yorkshire pudding and desert.</p>
</div>

Upvotes: 1

Views: 85

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

CSS is not able to affect the content of an element in the manner you require. However you can achieve it using JS, like this:

$('#myP').html(function(i, h) {
  return h.replace('+', '<br />+');
});
#myDiv {
  width: 80%
}
#myP {
  color: blue;
  font-family: arial;
  font-size: 3em;
  font-weight: 900;
  line-height: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <p id="myP">Potatoes, peas, carrots, corn, beans, butter + meat, gravy, yorkshire pudding and desert.</p>
</div>

Alternatively you could just amend your HTML to include the <br /> tag, or change the content so that the text after the + character sits within its own p tag.

Upvotes: 3

Related Questions