Forced line break at particular point in text

Question

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable?

#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>

javascript jquery css

Answer 1

Answer №1

Unfortunately, CSS does not have the capability to manipulate the content of an element as you are requesting. However, this desired effect can be achieved using JavaScript. Here is an example:

$('#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 modify your HTML code by adding the <br /> tag or restructuring the content so that the text following the + symbol is enclosed in its own p tag.

Answer 2

Unfortunately, CSS does not have the capability to manipulate the content of an element as you are requesting. However, this desired effect can be achieved using JavaScript. Here is an example:

$('#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 modify your HTML code by adding the <br /> tag or restructuring the content so that the text following the + symbol is enclosed in its own p tag.

Forced line break at particular point in text

Answer №1

Similar questions

Puppeteer has a limit of running only three instances on Heroku

Struggling to populate a nested array in a dropdown using AngularJS

In JavaScript, filter out an array of image links that end with .jpg, .jpeg, .png, or

Utilize jQuery to dynamically load and assign unique ids to elements within an array

Is it recommended to include the default declaration in the same stylesheet as the media queries?

Creating a nested JSON file dynamically in Angular: A step-by-step guide

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

Adjusting the height of a Jquery Fancybox to allow for scrolling down

When using Javascript template literals, they function properly when assigned to a variable, but they do not work when included in a JSON

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

Issue: Access to sdcard/hello.mp3 file denied due to permission error (EACCES)

Tips for retrieving a value from a callback function?

Tips for formatting list items to display quotes in a scrolling ticker

Integrating individual script into HTML

Is it possible to retrieve the IMEI number of a mobile phone using expo?

Issue with the navbar toggler not displaying the list items

Displaying a dynamic flag icon in a span element based on the selection from a mat-select

When I click the button, it deletes the DOM element and hides it, preventing me from

Trouble updating Kendo DropDown in Internet Explorer

Implement seamless content loading using jQuery, eliminating the need