Clash Royale CLAN TAG#URR8PPP

How to Break a Word When Wrapping in a Specific Location

I have a long word in the banner of my index page and I am having trouble getting it to wrap properly. I've referenced tutorials but I haven't come across how to tell a browser where to place the break when the screen size gets too small.

I don't want the browser to try and determine the best place to break a word, but I want to be able to choose that spot which the browser seems not to understand.

HTML

//break between the words Super and Long.
<p>ThisIsTheSuperLongWordThatNeedsToBeSplit</p>


1 Answer
1

One possible solution, if to not use script, and since I assume you have control over the code, is to wrap the word in groups, here done with span's, which will then allow for it to break at a chosen position, e.g. like this, using Flexbox

span

With this it still will look as a whole word when width is wide enough.

Stack snippet

p.header
display: flex;
flex-wrap: wrap;


.demo
border: 1px dotted gray;
width: 250px;

.demo2
border: 1px dotted gray;
width: 350px;


<div class="demo">
<p class="header"><span>ThisIsTheSuper</span><span>LongWordThatNeedsToBeSplit</span></p>
</div>

<div class="demo2">
<p class="header"><span>ThisIsTheSuper</span><span>LongWordThatNeedsToBeSplit</span></p>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.