CODEWITHSUNDEEP
htmlcss
ILCAI
ILCAI

Reputation: 1234

How can I wrap words but not wrap by whitespace with CSS?

With the following markup, is it possible (and how) to achieve a wrapping like shown in the preview?

Markup

<div class="filled-box">
  <h2>Hi there</h2>
  <p>I am just a text with some words, that want to fill the entire space</p>
</div>

CSS

.filled-box {
  width: 80px;
  height: 80px;
  position: absolute;
  overflow: hidden;
}

.filled-box h2,
.filled-box p {
  display: inline;
  overflow-wrap: break-word;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

Preview

Hi there I am
just a text w
ith some word
s, that want 
to fill the e
ntire space

If there is a solution it of course may use CSS3 Syntax.

Upvotes: 2

Views: 2631

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106078

make the h2 float and inherit font-size :

.filled-box {
  width: 85px;
  position: absolute;
  word-break: break-all;
  font-size: 16px;/* or whatever */
  margin: 0;
  padding: 0;
}

.filled-box * {
  margin: 0;/*reset*/
}

.filled-box h2 {
  float: left;
  font-size: inherit;
  padding-right: 0.2em;
  font-weight: normal; /*whatever*/ 
  color:rgb(51, 170, 255) /* whatever*/
}
<div class="filled-box">
  <h2>Hi there</h2>
  <p>I am just a text with some words, that want to fill the entire space</p>
</div>

or use display:contents, but not supported everywhere unfortunatelly here:

.filled-box {
  width: 85px;
  position: absolute;
  word-break: break-all;
  font-size: 16px;/* or whatever */
  margin: 0;
  padding: 0;
}

.filled-box * {  
  display:contents;
}

.filled-box h2 {
  font-size: inherit;
  padding-right: 0.2em;
  font-weight: normal; /*whatever*/ 
  color:rgb(51, 170, 255) /* whatever*/
}
<div class="filled-box">
  <h2>Hi there</h2>
  <p>I am just a text with some words, that want to fill the entire space</p>
</div>

The display value to used should be run-in supported once in Chrome :

.filled-box {
  width: 85px;
  position: absolute;
  word-break: break-all;
  font-size: 16px;
  /* or whatever */
  margin: 0;
  padding: 0;
}

.filled-box * {
  margin: 0/* reset*/
}

.filled-box h2 {
  display: run-in;
  font-size: inherit;
  padding-right: 0.2em;
  font-weight: normal;
  /*whatever*/
  color: rgb(51, 170, 255)/* whatever*/
}
<div class="filled-box">
  <h2>Hi there</h2>
  <p>I am just a text with some words, that want to fill the entire space</p>
</div>

But it just doesn't work for many reason, see: https://css-tricks.com/run-in/

Upvotes: 1

weegee
weegee

Reputation: 3409

word-break: break-all; is what you are looking for probably. Devil is in the details.

Your initial markup has an h2 tag with a p tag and but your preview shows that they are all inline. h2and p tags are not inline elements.

And thus, making them display: inline is not the ideal thing to do, instead use inline elements, like span and others.

Another thing to notice here is that word-break: break-all; doesn't works properly on your inline elements. Just use the tags what they were made for and tweak the values according to our prefs.

.filled-box {
  width: 85px;
  position: absolute;
}

.filled-box p span{
  word-break: break-all;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.filled-box p {
  word-break: break-all;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
<div class="filled-box">
  
  <p><span>Hi there</span> I am just a text with some words, that want to fill the entire space</p>
</div>

Upvotes: 2

DevLasting
DevLasting

Reputation: 352

You can use word break property of css. Simply add 

word-break: break-all;

It will automatically fill up the entire width and wrap the overflown text.

Also, replace the h2 tag as it is a block element

Upvotes: 1

Related Questions