CODEWITHSUNDEEP
htmlcss
user8431675
user8431675

Reputation:

How do I add white space to a div but at the same time keep the words in the div?

How can I add words to a div that haves white space capabilities but at the same time it doesn't leak out of the div?

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
    white-space: pre;
}
</style>
</head>
<body>

<p class="test">     This paragraph      contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

Upvotes: 0

Views: 1569

Answers (4)

mohammad pourskandar
mohammad pourskandar

Reputation: 1

your css should be something like this: 

p.test {
    border: 1px solid #000000;
    word-wrap: break-word;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

Upvotes: 0

user8431675
user8431675

Reputation:

Never mind I figure it out this is what help me to keep the words in the div but at the same time allow white space, with this CSS command call white-space: pre-wrap;

Here's the link if any one need help with this. https://css-tricks.com/almanac/properties/w/whitespace

Upvotes: 0

Johannes
Johannes

Reputation: 67758

If your concern is to have spaces between words that are longer than one space (that's one way to understand your question IMO), you can simply use standard (i.e. default) CSS settings and use &nbsp; entities for the ("white") spaces.

In addition, if you have words that are longer than the width of the container, you can use word-break: break-all; in separate spans around these words to which you also apply display: inline-block; :

.bw {
  display: inline-block;
  word-break: break-all;
}
<!DOCTYPE html>
<html>

<head>
  <style>
    p.test {
      width: 11em;
      border: 1px solid #000000;
    }
  </style>
</head>

<body>

  <p class="test">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This paragraph&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contains a very long word: <span class="bw">thisisaveryveryveryveryveryverylongword.</span> The long word will break and wrap to the next line.</p>

</body>

</html>

Upvotes: 0

rjustin
rjustin

Reputation: 1439

You can use overflow-x css property. Setting it to scroll makes it scrollable. You can use hidden to make it not appear when it overflows.

edit: overflow-x:auto applies scrollbar only as necessary suggested by @Commercial Suicide.

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    border: 1px solid #000000;
    word-wrap: break-word;
    white-space: pre;
    overflow-x:auto;
    width:auto;
}
</style>
</head>
<body>

<p class="test">     This paragraph      contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

hidden version:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: auto; 
    border: 1px solid #000000;
    word-wrap: break-word;
    white-space: pre;
    overflow-x:hidden;
}
</style>
</head>
<body>

<p class="test">     This paragraph      contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

Upvotes: 1

Related Questions