使用 css 或 javascript 将文本包裹在固定 Div 内？

Question

我有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（最新）。

Answer 1

我可能误解了你的问题，但看起来你所需要的只是一些 CSS，特别是最大宽度（对于所有非白痴浏览器）和带有古怪 IE 表达式的宽度（对于 IE）。

例如，

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

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

Answer 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("");
}