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，特别是max-width（适用于所有非白痴浏览器）和带有古怪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("");
}

用css或javascript包装固定Div内的文本？

2 个答案: