div容器：限制文本向右一行

Question

I tried adjusting the width in several places of my CSS, but the text keeps on flowing on one line and doesn't wrap within a "leftsidebar". There seems to be no limit as to how far my text goes to the right, and I want there to be a limit. How do I set that in CSS?

<h3> JKHJKHJKHKJHJKHJKHJKHKJHJKHJKHKJH</h3> 


#leftsidebar {
  position:fixed; 
  width: 160px; 
  top:150px; 
  margin:0px;
  line-height:165%; 
  white-space:nowrap; 
  z-index:50; 
  padding: 0px 35px;
}

http://jsfiddle.net/4uxcN/

Answer 1

Remove white-space:nowrap; (and eventually add word-wrap: break-word; to respect your div boundaries with your no-spaced long word) to send the text to new lines;

add overflow-x: scroll; if you instead want the text in one single line but want to have an horizontal scrollbar inside your fixed width div: http://jsfiddle.net/4uxcN/10/

Answer 2

如果您在谈论word-wrap: break-word属性，它将在到达父级宽度的末尾时中断单词。

Answer 3

Remove {white-space:nowrap;}, which forces your text to one line and add {word-wrap: break-word} to deal with your very long word.

http://jsfiddle.net/4uxcN/6/

#leftsidebar {
    word-wrap: break-word;
}

Answer 4

Basically, there are 3 ways you can do it:

1. Just remove your white-space property. LINK
2. Remove white-space property, and add word-wrap: break-word; property. LINK
3. Set you white-space to pre-wrap instead of nowrap . LINK

Answer 5

If you remove

white-space:nowrap; 

All text will break at the spaces to fit within the box width.

Super long strings like the one in you example will not break. To force stupid long strings to break you can use.

word-wrap:break-word;

also you could use an overflow property Like

overflow:scroll

It just really depends on the layout you are going for