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

Form submission using Jquery not functioning properly in Firefox

Ways to prompt the debugger to pause whenever a specific script file is called during execution in Edge/Chrome debugger

A unique Javascript feature that switches the text on various buttons

The image begins rotating only after the second click has been made

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

Creating a three-dimensional shape using a transparent image in Three.js

What's the process for browsers to render the 'span' element?

Learning how to handle URLEncoded format in Vue JS

Complete a submission using an anchor (<a>) tag containing a specified value in ASP.Net MVC by utilizing Html.BeginForm

Postman post request failing to insert Mongoose model keys

Exploring the use of MediaSource for seamless audio playback

Implementing auto-complete functionality for a text box in an MVC application using jQuery

Mastering the art of dynamically chaining methods in JavaScript

What is the process of manually loading webpack async chunks in the event that a dynamic import fails to load the file?

Guide on retrieving POST data in sveltekit

What could be causing the span class data to not be retrieved by the getText method

Using Jquery to handle ajax responses through the load() function

Setting the value for datepicker and timepicker in ReactJS for individual rows

The issue of the keyboard disappearing on Chrome for Android while switching between different input

Efficiently encode and decode JSON data between PHP and JavaScript