用 css 或 javascript 将文本包裹在固定的 Div 中？答案

【问题标题】：Wrap Text inside fixed Div with css or javascript?用 css 或 javascript 将文本包裹在固定的 Div 中？
【发布时间】：2010-12-07 23:03:44
【问题描述】：

我有 tinymce 编辑器（textarea）和一个 div。每当我在文本编辑器中键入时，它都会实时显示在预览 div 中（200px），这看起来像 stackoverflow 预览。

我想要实现的是，如果我们输入一个没有空格的单词并且如果超过 200px，我想将它换行到下一行。

我试图找到它，但我还没有找到解决方案。我尝试了在这里找到的解决方案

.preview_desc 
{   
    word-wrap: break-word; /* IE>=5.5 */  
    white-space: pre; /* IE>=6 */  
    white-space: -moz-pre-wrap; /* For Fx<=2 */   
    white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3 */ 
}

它在 IE7 中效果不佳。它添加了左右空间。所以我的 div 变得像下图一样宽

http://img38.imageshack.us/img38/2650/ie7g.jpg

在IE8中，正确的样子是这样的。

img35.imageshack.us/img35/3915/ie8a.jpg（请加http://并查看）

Opera 10 也不能完全正常工作。

然后我也有行数 js。这是

var height = document.getElementById('divpreview').clientHeight;
var lines = Math.round(height / 10); 
document.getElementById('lines').innerHTML = lines;  
if(document.getElementById('divpreview').innerHTML == "")
{
     document.getElementById('lines').innerHTML = 0;  
}

如果我们使用上面的 css 代码，它在除 IE8 和 7 之外的所有浏览器中从第 2 行开始计数。

我只想在所有最新的浏览器上工作，即 FF2、3、IE7、IE8、Safari、Chrome、Opera（最新）。

【问题讨论】：

gr8，SO 也遇到了同样的问题，找到解决方案后告诉他们。
作为参考，您可以将图片直接放在您的问题中
是的，我还不能放置图像，因为我还没有 10 分：S

标签： javascript css textarea word-wrap

【解决方案1】：

我可能误解了您的问题，但您似乎只需要一点 CSS，特别是一个最大宽度（适用于所有非白痴浏览器）和一个带有古怪 IE 表达式的宽度（适用于 IE）。

例如

max-width:200px;
_width:expression(document.body.clientWidth > 200? "200px": "auto" );

当你将它与你已有的 CSS 结合起来时，它似乎应该可以工作。

【讨论】：

嗨 machineghost，我刚刚测试过。 t 不起作用。 IE7 仍然像我在上面的屏幕截图中显示的那样打破宽度。我不知道为什么。 IE8 没问题。然后，歌剧 10 并没有完全包装。有什么想法可以帮助我吗？谢谢。
对于 IE 你可能想尝试的东西：overflow:hidden;。很难确切地说出您的问题是什么而无法看到它（如果您可以在网络上的某个地方公开一个显示问题的示例页面会更有帮助），但基本上这听起来像是一个 CSS 布局问题.然而，由于涉及的所有因素，这些问题可能很难调试，所以我还建议尽可能多地删除问题，这样你就只有一个包含问题元素的页面，没有别的.这应该可以更轻松地隔离问题。
（我所说的“因为涉及的所有因素是”的意思是，单个元素的布局会受到其父级、其父级的父级、其父级的父级的布局的影响，. ...加上任何兄弟元素的布局，再加上任何子元素的布局。为其中任何一个定义的 CSS 样式可能会导致您在原始元素的布局中看到一些奇怪的东西，因此很难弄清楚是什么正是导致您看到的事情。但是，如果您可以仅使用问题元素制作一个简单的页面，则可以消除所有这些潜在因素。）

【解决方案2】：

function GetWrapedText(text, maxlength) {    
    var resultText = [""];
    var len = text.length;    
    if (maxlength >= len) {
        return text;
    }
    else {
        var totalStrCount = parseInt(len / maxlength);
        if (len % maxlength != 0) {
            totalStrCount++
        }

        for (var i = 0; i < totalStrCount; i++) {
            if (i == totalStrCount - 1) {
                resultText.push(text);
            }
            else {
                var strPiece = text.substring(0, maxlength - 1);
                resultText.push(strPiece);
                resultText.push("<br>");
                text = text.substring(maxlength - 1, text.length);
            }
        }
    }
    return resultText.join("");
}

【讨论】：