CSS - 让div显示尽可能多的文本而不会发疯

Question

我一直在使用jQuery的对话框控件为tinyMCE编辑器创建一个拼写检查对话框。我这样做的原因是因为我们的用户有触摸屏，而点击字/点击替换的默认方法太麻烦了。

我终于得到了拼写检查对话框，以确保一切正常。

然而，如果激起我显示文本的div可以用两种不同的方式解决。

例如，这是我希望它工作的对话框。在ie7中看到“工作”。 http://jsfiddle.net/PMX8r/2/

在ie8（或任何较新的浏览器）中查看，这是一个非常不同的问题。

另一个问题是，如果用户输入一个可笑的长字，我的按钮会被推开！在ie7中看到这里。 http://jsfiddle.net/PMX8r/3/

我应该看哪些风格属性让这个div得到控制？

修改 很好，看起来overflow: hidden也解决了第二个问题。

Answer 1

按钮不会被推到一边，但第一个问题，文本溢出div，可以通过

修复

.SpellCheckDiv {
  overflow: hidden;
}

假设还有其他方法可以滚动，否则请使用overflow: scroll;

Answer 2

尝试添加

overflow: scroll

或

overflow: hidden

到容器-textarea的样式标记。

这将添加滚动条（第一种情况）或隐藏溢出的文本。

Answer 3

此行为的原因是您的div高度为100px且内容超出了100px的限制  在overflow:auto;课程中使用.SpellCheckDiv。

.SpellCheckDiv
        {
            height: 100px;
            width: 318px;
            border: 2px solid black;
            word-wrap: break-word;
    overflow:auto;
        }

溢出：隐藏; - 如果你不需要滚动条
您也可以使用overflow-x:{scroll|auto|hidden}和overflow-y:{scroll|auto|hidden}来控制垂直和水平滚动条。（CSS 3）

您可以在此处测试不同溢出行为的结果 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-xy

Answer 4

overflow属性可以帮助您。关于你的代码：

.SpellCheckDiv
    {
        height: 100px;
        width: 318px;
        border: 2px solid black;
        word-wrap: break-word;
        overflow: scroll;
    }

它表示当文本溢出时（即它不适合当前窗口大小），它应该自动滚动。

这是modified JSFiddle代码。