使用css或javascript在固定Div中包装文本？ [英] Wrap Text inside fixed Div with css or javascript?

问题描述

我有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; / *对于Fx <= 2 * / 
白空间：预包装; / * Fx> 3，Opera> 8，Safari> 3 * / 
} 
  

在IE7中不能正常工作。它添加了左右空间。所以我的div变得如下图所示的那么广。

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

在IE8中，这是正确的外观This。

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。

我只想工作在所有最新的浏览器，FF2,3，IE7，IE8，Safari，Chrome， / p>

请帮我。感谢。

解决方案

我可能误解了你的问题，但似乎你只需要一点CSS， -width（对于所有非愚蠢的浏览器）和宽度与一个wacky IE表达式（对于IE）。

例如

  max-width：200px; 
 _width：expression（document.body.clientWidth> 200？200px：auto）; 
  

当你将它与已经拥有的CSS结合使用时，它似乎应该工作。

I have tinymce editor(textarea) and one div. Whenever i type inside the text editor, it shows at the preview div which is (200px) in real time which is looks alike stackoverflow preview.

What I want to achieve is, if we type one words without space and if exceed 200px, I want to wrap it to the next line.

I tried to find it and I didn't find the solution yet. I tried this solution which i found here

.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 */ 
}

It doesn't work well in IE7. It added the left and right space. So my div become so wide like the following image

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

In IE8, which is correct looks is like this.

img35.imageshack.us/img35/3915/ie8a.jpg (Please add http:// and view)

Opera 10 is not totally working also.

And then I have line count js also. Which is

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;  
}

If we use the above css code, it starting count from line 2 in all browsers except IE8 and 7.

I only want to works on all latest browser which is FF2,3,IE7,IE8,Safari,Chrome,Opera (latest).

Please help me out. Thanks.

解决方案

I may be misunderstanding your issue, but it seems like all you need is a bit of CSS, specifically a max-width (for all the non-idiotic browsers) and a width with a wacky IE expression (for IE).

For instance

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

When you combine that with the CSS you already have, it seems like it should work.

这篇关于使用css或javascript在固定Div中包装文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！