# Fix Text Overlap with CSS white-space

sometimes nowrap is helpful when you do n’t want the text to break in an awkward position 🔗 however, nowrap can sometimes lead to overlapping text. You can easily fix it by setting the white-space to be normal 👍

 div  { 

Bạn đang đọc: Fix Text Overlap with CSS white-space

white-space : nowrap ; }

❌ Some extra long textbook Some text

 div  {
   white-space : normal ;
 }

✅ Some excess long text Some textbook

# Why does text overlap occur?

Let ‘s grok into it a bite deep why textbook overlap occurs.

 

<

div

class

=

"

container

"

>

<

div

class

=

"

boxes

"

>

Some extra long text

div

>

<

div

class

=

"

boxes

"

>

Short text

div

>

div

>

 .container  {
   expose : flex ;
 }

 .boxes  {
   white-space :  nowrap ;
 }

Some extra retentive textbook Some text

evening though, we have nowrap set, there is no overlapping. great ! But let ‘s see what happen we set a fix width on our boxes.

 .boxes  {
   width : 100px ;
 }

Some extra long text Some text

Oh no 😱 The overlap is upon us ! This is happening because the default is width: auto. Which means the boxes would expand based on its content. however, when we slap a fix width, we restrict it from growing. And with no where to go, the text bleeds into its sibling box 🤭

# Solution to overlapping text

We can easily fix this by changing our white-space to normal.

 .container {
   display : flex ;
 }

 .boxes {
   width : 100px ;
   white-space : normal ;  
 }

Some extra long text Some textbook

Of naturally, you can besides fix this by removing the fixed width ( i. width: auto ) if you do n’t mind the box expanding. Which is better ? Well, it all depends on the User Interface you want to design 🙂

# Use case of nowrap

Before you jump to the stopping point that nowrap is no good because it can cause overlap. There are instances where I want to preserve the original kind of my text. Because the text breaking apart would render the result unintentional consequence and create an awkward drug user interface and hurt exploiter experience.

# Advantage of nowrap for code display

For exercise, in code blocks, I do n’t want the text to wrap. Text wrap would make the inclusion of my code case unmanageable. rather, I want to preserve it on a one line and have the bubble over trigger a scroll bar.

white-space: normal ❌
value && Object.keys(value).length === 0 && value.constructor === Object;

white-space: nowrap ✅
Object.keys(value).length === 0 && value.constructor === Object;

sometimes when you create a “ Learn more ” or “ Read more ”, you might append a caret “ » ” or “ › ”. And you want this text to be in concert because breaking them apart can create an awkward resultant role.

white-space: normal ❌ Read the code notes Learn more
»

white-space: nowrap ✅ Read the code notes Learn more »

There ‘s more values you can set with white-space :

 white-space : normal ;  
 white-space : nowrap ;
 white-space : pre ;
 white-space : pre-wrap ;
 white-space : pre-line ;
 white-space : break-spaces ;

I plan to cover each of these in great details in a future code choice morsel. In the think of time, if you want a head begin, check out MDN doctor : white-space 👍

# Assume Positive Intent When Working on Existing Code Base

sol I noted that white-space: normal is the default. That means this overlap would never had happen if we did n’t implement white-space: nowrap. That means person actually wrote this style into our codebase 😳 Before you get 😡 … When you ‘re working on existing codebase, we much run into code that does n’t makes sense. But before you go all git blame 😅, let ‘s assume incontrovertible captive. As developers, we always try to plan for the edge cases. But often, we wo n’t truly know until we push up the code and let our users start using it. It ‘s very unmanageable to 100 % understand the full extent of our execution. We do our best but we might miss a few spots. Quite honestly, it ‘s why developers calm have a job. Most of the time, we ‘re doing tease fixes 🐞 We should n’t be afraid to make changes. In fact, it ‘s how we progress and become better. During our attempt to improve things, we ‘re going to make mistakes. When that happens, do n’t spin your wheels playing the blasted game or be promptly to negative opinion. We need to be empathic that we all went in with the best purpose. The authoritative thing is, we need to learn from our mistakes, fix it swiftly, and continue moving advancing 💪

# Community Input

@ KyleDaltonSmith : text-overflow : ellipsis can besides help in the right situation.

@ longlho : white-space property has quirks around certain scripts that don ’ thyroxine practice whitespaces so it ’ s not 100 % i18n-safe.

  • Yup it ‘s a pretty common problem in different standards interop ( CSS – W3C, JS – ECMA262, Unicode – Unicode ). If you take any sentence in Lao like ມື້ນີ້ເປັນມື້ທີ່ດີ FF & Chrome break differently. Same for other text handling CSS like uppercase/word-wrap/text-overflow …
  • interestingly besides if you look at my tweet above in FF vs Chrome uracil can already see the deviation in wrapping when it encounters Lao. Multibyte characters like zalgo get worse .
  • @donut87 : I always assume positive intent. Nevertheless if I do not understand something git blame is one of the handiest tools there is. It tells me who to ask. The naming is awful, though. It has nothing to do with blaming a person for a mistake, but is rather a ‘show me who is responsible’. I know people who have/had a git alias for blame and called it praise.
  • @andr3 : Mix it with media queries and you have a great solution for responsive anti-typographic-orphans! 😄 Orphans & Long Lines I love this property. Much more powerful than the simple   entity. Love your write up. Especially the “Assume Positive Intent” towards legacy code 😄 Indeed!
beginning : https://hashblink.net
Category : Technology

Leave a Reply

Your email address will not be published. Required fields are marked *