1

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>
Eddy
  • 566
  • 2
  • 8
  • 28
  • 1
    Add + character inside a tag and add style for this tag. – selami Oct 17 '16 at 09:32
  • the text is inside "myP" is backoffice generated, so I cannot add tags within the this text itself. I can add styling afterwards. – Eddy Oct 17 '16 at 09:44

1 Answers1

3

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • THANKS!! Looks great, let me try to apply in my website. – Eddy Oct 17 '16 at 09:46
  • the text is inside "myP" is backoffice generated, so I cannot add tags within the this text itself. I can add styling afterwards. – Eddy Oct 17 '16 at 09:53
  • But Javascript WORKS!! Thanks! – Eddy Oct 17 '16 at 09:53
  • Map I please ask for some more help. What if I wanted to apply this to the title-tag of an Image. My title-tag's are also used as captions under the photos. All ending with "Photo by...". $('title-tag').html(function(i, h) { return h.replace('Photo', '
    Photo'); });     – Eddy Oct 24 '16 at 14:44
  • Try this: http://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip – Rory McCrossan Oct 24 '16 at 14:47