CSS Word-wrap 将单词减半

Question

我设置了一个div元素

<div id="foo" class="bar"></div>

哪里吧

bar{word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;display:inline-block;text-align:left;}

然而，在该区域的末尾，有几个单词被切成两半。

我已经尝试将 word-wrap 属性设置为 normal、initial 和 inherit 但没有成功。

我是不是误解了自动换行的功能？

编辑

通过使用中断词我得到了这个

编辑这是酒吧的整个CSS。

.bar{BORDER:1px solid;height:<%=nHeight%>px;width:<%=nWidth/2%>px;max-width:<%=nWidth/2%>px; word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;background-color:#FFFFFF;cursor:default;display:inline-block;margin-top:6px;text-align:left;}

编辑

似乎我运行的是 css 2.1

Answer 1

我相信你在混淆东西。如果你想让单词不被打断，只有当一个单词很长而且不能放在一行时，你只需要使用word-wrap: break-word。

HTML:

<div id="foo" class="bar"></div>

CSS:(仅相关值)

.bar {
    width: 100px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    word-wrap: break-word;
}

工作 fiddle : http://jsfiddle.net/c2JPz/2/

所以你应该做的是改变:

overflow-x: 无滚动 隐藏

display: inline-block block (或删除此规则，因为这是 div 的默认样式)