0

我有一个文本区域（固定大小），它被一些文本填充，然后调整大小以适应（字体更改）。
下面的代码在 Chrome、Firefox 等中运行良好，但在 IE 中运行良好（版本 7/8/9，它也必须这样做）。
在非 IE 中，文本会调整大小并很好地适合文本区域，但在 IE 中，文本区域的每一行之间存在巨大差距。
我试过设置 line-height 但它似乎不起作用。我读过它与字体的高度有关，这意味着将每一行包装在一个跨度中并设置一个负的上边距。
任何想法都非常感谢。

代码示例；

html

<span id="inner-text">
        <textarea readonly="readonly" 
            cols="10" 
            rows="5" 
            class="messagetext" 
            style="width:400px; border:none;height:100px;overflow-y:hidden; resize:none;color: #D31245;"
            >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15</textarea>
</span><span id="temp" style="visibility:hidden"></span>

JS

$(function() {
    var while_counter = 1;
    var txt = $('textarea.messagetext');
    var font_size = txt.css('font-size').replace(/\D/g,'');
    var scHeight = txt.get(0).scrollHeight;
    var txtHeight = txt.height();
    while ( scHeight > (txtHeight+10) ) {
        font_size = (font_size - 1);
        txtHeight = (txtHeight + 15);
        while_counter = while_counter + 1;
    }

    var lines = txt.val().split('\n');
    var total_lines = lines.length;
    var span_width = $('#inner-text').width() - 5;
    var temp_span = $('#temp');
    // now calculate line wraps
    $.each(lines, function(){
        // temp write to hidden span
        temp_span.html(String(this));
        // check width
        if (temp_span.width() > 400) {
            total_lines = total_lines + 1;
        }
    });
    txt.css('font-size', font_size+'px');
    txt.height( (total_lines * font_size) + (total_lines * 1.14) + 10);
});
4

1 回答 1

0

将以下代码复制到一个 html 文件中并在 IE 中检查

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
<script  type="text/javascript">
$(document).ready(function() {
alert('hi');
var while_counter = 1;
var txt = $('textarea.messagetext');
var font_size = txt.css('font-size').replace(/\D/g,'');
var scHeight = txt.get(0).scrollHeight;
var txtHeight = $(txt).height();
while ( scHeight > (txtHeight+10) ) {
    font_size = (font_size - 1);
    txtHeight = (txtHeight + 15);
    while_counter = while_counter + 1;
}

var lines = txt.val().split('\n');
var total_lines = lines.length;
var span_width = $('#inner-text').width() - 5;
var temp_span = $('#temp');
// now calculate line wraps
$.each(lines, function(){
    // temp write to hidden span
    temp_span.html(String(this));
    // check width
    if (temp_span.width() > 400) {
        total_lines = total_lines + 1;
    }
});
$(txt).css('font-size', font_size+'px');
$(txt).innerHeight( (total_lines * font_size) + (total_lines * 1.14) + 10);
});
</script>
</head>
<body>
<span id="inner-text">
    <textarea readonly="readonly" 
        cols="10" 
        rows="5" 
        class="messagetext" 
        style="width:400px; border:none;height:100px;overflow:hidden;resize:none;color: #D31245;"
        >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15</textarea>
</span><span id="temp" style="visibility:hidden"></span>
</body>
</html>
于 2012-11-08T10:08:29.247 回答