CODEWITHSUNDEEP
htmlcsstextword-wrap
diesel
diesel

Reputation:

How to to get my text to wrap within a div?

#word {
  font-weight: bold;
  width: 20px;
  height: 100%;
  background-color: #0f3039;
}

#answer {
  width: 285px;
  height: 25px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-top: 15px;
  background-color: #0f3039;
  margin-left: 348px;
  font-size: 16px;
  margin-top: 0px;
}
<div id="answer" style="display:none;">
  Go With: <span id="word"></span>
</div>

I'm trying to make the text stay within boundaries, but it's not wrapping correctly. Not sure what needs to be changed.

Upvotes: 0

Views: 4476

Answers (2)

PeeHaa
PeeHaa

Reputation: 72729

You are using span which is an inline element. On an inline elemnet you can not set the width.

Change it to display: block;

Check out the fiddle: http://jsfiddle.net/zasDb/1/

Or even better display: inline-block;

But I don't know whether IE supports this.

Upvotes: 1

cristian
cristian

Reputation: 8744

try white-space possible values


white-space: none;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;      
white-space: pre-line;      
white-space: inherit;

Upvotes: 1

Related Questions