CSS Word-wrap 将单词减半答案

【问题标题】：CSS Word-wrap is cutting words in halfCSS Word-wrap 将单词减半
【发布时间】：2014-04-28 16:45:34
【问题描述】：

我设置了一个 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;}

但是在该区域的末尾有几个单词被切成两半。

我尝试将自动换行属性设置为正常、初始和继承，但没有成功。

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

编辑

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

编辑这是酒吧的整个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

【问题讨论】：

使用分词属性怎么样？ w3schools.com/cssref/css3_pr_word-break.asp
@Rjonacci 它仍然断词：/
我认为真正的问题是您的 CSS 选择器错误。您选择bar {...}，它应该是.bar {...}。我也从未听说过任何溢出设置的值 no-scroll。
@doge jsbin.com/danuv/2/edit
@JustusRomijn 感谢您的帮助，值得一提的是，由于大量使用 vbscript，该网站仅支持 IE 浏览器？

标签： css html

【解决方案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: ~~无滚动~~ hidden

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

【讨论】：