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

前端之家收集整理的这篇文章主要介绍了用css或javascript包装固定Div内的文本?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有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(最新).

请帮帮我.谢谢.

解决方法

我可能误解了你的问题,但似乎你只需要一点CSS,特别是max-width(适用于所有非白痴浏览器)和带有古怪IE表达式的宽度(对于IE).

例如

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

当你将它与你已经拥有的CSS结合起来时,它似乎应该可以工作.

猜你在找的CSS相关文章