CSS自动换行将单词切成两半

Question

我设置了div元素

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

其中bar

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，但没有成功。

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

修改

使用break-word我得到这个

修改 这是酒吧的整体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;
}

工作小提琴： http://jsfiddle.net/c2JPz/2/

所以你应该做的就是改变：

overflow-x: no-scroll hidden

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