Split a text into two lines

Question

Is there a way to force a part of a text to display on a new line with CSS?

So when the HTML looks like this:

<p>Hello, my name is John.</p>

The result will be:

Hello,

my name is John.

The HTML is generated dynamically, so I cannot change it.

@StavrosAngelis I know how to do it with HTML but that was not the question. — Reza, Mar 24 '17 at 12:14
Css doesn't support what you want to do. Your only option is to split the string with javascript in the coma character and add a break line afterwards — Stavros Angelis, Mar 24 '17 at 12:21
Does this answer your question? [Wrap a text within only two lines inside div](https://stackoverflow.com/questions/11989546/wrap-a-text-within-only-two-lines-inside-div) — Yong, Feb 28 '22 at 06:30

score 5 · Accepted Answer · edited Feb 21 '20 at 10:03

5

p::before {
  float: right;
  width: calc(100% - 3.6em);
  height: 1em;
  content: '';
}

<p>Hello, my name is John.</p>

Please note that this is rather fidgety: the 3.6em is somewhere in between the width of "Hello," and the width of "Hello, my". So this depends on the font as well as the word(s) you need it to break after. I had to experiment a bit with different fonts to find a good average size.

edited Feb 21 '20 at 10:03

Penny Liu

15,447
5
79
98

answered Mar 29 '17 at 20:57

Mr Lister

45,515
15
108
150

OK. But please see the note I added just now (which I should have added yesterday). – Mr Lister Mar 30 '17 at 13:27

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

The short answer is, you cannot split a text without writing code in between your texts.

Follow this link which provides a good solution.

How to give line-break from css, without using ?

edited May 23 '17 at 12:02

Community

1
1

answered Mar 24 '17 at 12:25

Mahedi Hassan

93
1
10

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

But this does not even consider where to split the lines automatically. If you want something more automated, you need to use php or javascript.

Here is an example from another link: SPLIT HTML INTO different lines

Check and let me know if it helps you.

Thanks S

edited May 23 '17 at 12:17

Community

1
1

answered Mar 24 '17 at 12:14

Shei Man

21
1
6

Grinex · Answer 4 · 2017-03-24T12:39:25.343

-1

There are many ways how to do it.

First is using the   element of HTML

<p>Hello,<br> my name is John.</p>

Second is to put both of it in  tag

<p>Hello,</p>
<p>my name is John.</p>

Third is by putting both of it in  tag with css attribute and value clear:both - this is to make sure that no element will be floated in left or right

Try the codes below and hope it helps you.

p {
  clear: both;
}

<p>Hello,</p>
<p>my name is John.</p>

All of it will output

Hello,

my name is John.

edited Mar 24 '17 at 12:39

answered Mar 24 '17 at 12:22

Grinex

128
1
1
10

1

Thanks but as I mentioned in my question, I cannot change the HTML. I am looking for a CSS solution or similar. – Reza Mar 24 '17 at 12:52
@Reza really? are you using a template or somewhat a drag and drop tool? – Grinex Mar 24 '17 at 12:56
Nope, I am using Drupal. I need it for one of the menu items. – Reza Mar 24 '17 at 13:18

score -4 · Answer 5 · edited Mar 29 '17 at 20:13

-4

<p>Hello, <br>my name is John.</p>

or just put another  tags

<p>Hello, </p>&nbsp;<p>my name is John.</p>

edited Mar 29 '17 at 20:13

Mr Lister

45,515
15
108
150

answered Mar 24 '17 at 12:09

jeanawhou

171
1
11

Uhm ... Really? – Reza Mar 24 '17 at 12:10

Split a text into two lines

5 Answers5