/    Sign up×
Community /Pin to ProfileBookmark

break sentences into words

Copy linkTweet thisAlerts:
Jul 05.2021

If there a way I could break an H1 that has a sentence into words, For ex.
`<H1>Watermelon Ice Cream<H1>`
display:
`Watermelon
Ice
Cream`

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@soyreynaldJul 05.2021 — Using the explode() function in PHP, and the split() method in JavaScript you can accomplish that.
Copy linkTweet thisAlerts:
@NogDogJul 05.2021 — The quick and dirty way would be simply to set the H1 width to 1em. You'd then need to ensure no other element floating to the right of it would be overlapping with the words that extend beyond that width (maybe a bunch of padding on the right for the H1?).
Copy linkTweet thisAlerts:
@JMRKERJul 05.2021 — Why not this ...

``<i>
</i>&lt;H1&gt;Watermelon Ice Cream&lt;H1&gt;

&lt;script&gt;
const h1 = document.querySelector('h1').textContent; // alert(h1);
let h1Words = h1.split(' ');
alert(h1Words.join('n'));
&lt;/script&gt;<i>
</i>`</CODE>

<CODE>`<i>
</i>``
Copy linkTweet thisAlerts:
@NogDogJul 05.2021 — @JMRKER#1633753

Might need to join with &lt;br&gt; if not using a &lt;pre&gt;-type element? (I'm assuming the intent was that it display one word per line. 🤷 )
Copy linkTweet thisAlerts:
@JMRKERJul 05.2021 — @NogDog#1633754

OP did not indicate where the words would be displayed. I used alert as an example only to show the split into an array.

I had not thought about putting the desired output back into the H1 tag.

If that is desired, the following might work too ...
``<i>
</i>&lt;H1&gt;Watermelon Ice Cream&lt;H1&gt;

&lt;script&gt;
const h1 = document.querySelector('h1');
let h1Words = h1.textContent.split(' ');

h1.innerHTML= h1Words.join('&lt;br&gt;');
&lt;/script&gt;<i>
</i>``
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...