1

For example, If I have a sentence like the following:

I like cute dogs because they're awesome

doing something like word-break: break-word might give you

I like cute dogs because they're awe

some

The behavior I want is for it to break like

I like cute dogs because they're

awesome

I can't seem to find a way to do this. In most cases, the words do seem to fit efficiently into the container, but there are weird cases with long words that spill out even though I would think it should know how to rearrange them for this not to happen. The words aren't even close in length to the width of the container, so it's not that what I'm trying to achieve is impossible or anything. The CSS I have written is so negligible that it's probably not even worth including, but it's something like:

.someClass {
   margin-bottom: 2rem;
   padding: 0.5rem;
}

p {
   font-size: 1.1rem;
   margin-bottom: 0.375rem;
}

.someClass' size is a fixed value, and its parent is a flex container. I tried adjusting the available space of the flex cell it occupies to exactly the size of the container element but it made no difference.

  1. Why do words which are only a fraction of the width of the parent overflow sometimes? Like, why aren't they auto arranged to divide the space without overflowing?
  2. Is there a way to ensure no overflow but without breaking mid-word, and instead of breaking at word boundaries?

Thanks for the help and cheers.

YT_Xaos
  • 335
  • 4
  • 19
embracethefuture
  • 515
  • 7
  • 17
  • see the docs [Wrapping and breaking text](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text) – pilchard Dec 11 '21 at 21:59
  • @pilchard I read this already. It didn't resolve my issue. My word isn't longer than the container. It's much shorter, but this is still happening. – embracethefuture Dec 11 '21 at 22:01
  • Does this answer your question? [What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS](https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break) – HoldOffHunger Dec 11 '21 at 22:14
  • @HoldOffHunger No, unfortunately. I understand the general concepts of word wrap I should say. My situation is a weird edge case I can't account for. – embracethefuture Dec 11 '21 at 22:19
  • 1
    That's the DEFAULT text behavior in HTML. You don't need any CSS command for that. – Bekim Bacaj Dec 11 '21 at 22:21
  • @BekimBacaj YES I know that too. So why is it happening? That's the question. It happens even if I get rid of all my css. – embracethefuture Dec 11 '21 at 22:22
  • If it's not happening in your demo example, then maybe your problem is something else entirely. – HoldOffHunger Dec 11 '21 at 22:42
  • 1
    @embracethefuture as I said in another comment, examine your text in detail. There is such a thing as a Unicode "zero-width space" character. If that appears between two non-space letters in a word, the browser will think it can break the word at that point. – Pointy Dec 12 '21 at 02:54
  • I agree with @Pointy its worth a try but when I face this kind of issues I move only the needed code into a new test page and debug it. I suggest you to do same – Andam Dec 12 '21 at 16:04

3 Answers3

2

if i understood you correctly word-wrap: break-word; does what you need

p {
  width: 260px;
  background-color: green;
  word-wrap: break-word;
}
<p>
  I like cute dogs because they're awesome
</p>
Andam
  • 2,087
  • 1
  • 8
  • 21
  • 2
    That doesn't work for me. It's still breaking apart the word in the middle. My text is dynamically fetched from JSON, and the word is "geographic". Applying word-wrap: break-word breaks it after geogr, and aphic gets rendered on the next line. – embracethefuture Dec 11 '21 at 22:04
  • @embracethefuture it should work as you can read from the documentation here https://developer.mozilla.org/en-US/docs/Web/CSS/word-break but if you put more of your code we might be able to figure out why its behaving like that. by more of your code i mean the html and css of it and the content it has for the paragraph – Andam Dec 11 '21 at 22:15
  • 1
    This answer is perfectly fine, upvoted. It clearly works in the 6-line demo up above. NOTE: MDN Webdocs says `break-word` isn't supported in old versions of IE, but it seemed to work in my IE. – HoldOffHunger Dec 11 '21 at 22:15
  • The part I included is the only relevant influence on this behavior. I'm 100% certain of that. The only other thing I could include is the fetched JSON, but that wouldn't be helpful. I've looked it over already, and there isn't anything funky going on. The occurrence of this unwanted behavior is like 1/1000. I've only seen one case of it happening. – embracethefuture Dec 11 '21 at 22:17
  • @embracethefuture make sure the text you're fetching does not include embedded zero-width space characters. – Pointy Dec 12 '21 at 00:38
0

You could use the property overflow-wrap: break-word to start the word in another line. Code snippet below:

.container {
 padding: .5rem;
 overflow-wrap: break-word;
 background: yellow;
 width: 100px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt.
</div>
YT_Xaos
  • 335
  • 4
  • 19
  • 2
    See my comment to the above answer. This doesn't work for me. It's breaking inside the word, not at the word boundary. – embracethefuture Dec 11 '21 at 22:06
  • 1
    My answer uses `overflow-wrap` and not `word-wrap`. Also, I'm not sure why it wouldn't work as the snippet above shows that it does work. – YT_Xaos Dec 11 '21 at 22:08
  • It doesn't work in ALL cases, and in particular, it doesn't work in my case. Both properties you mentioned achieve the same result. Again, my data is dynamically fetched and in almost every case, there is no need for word-wrapping because the text is distributed efficiently. However, there are edge cases (even with short words). Either there is overflow, or using overflow-wrap: break-word, breaks at the middle. – embracethefuture Dec 11 '21 at 22:15
0

You can use this

.someClass p {
   word-break: normal;
   overflow-wrap: anywhere;
}
<div class="someClass"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p></div>
Alexander Kosykh
  • 361
  • 1
  • 3