我有一个文本区域(固定大小)，其中填充了一些文本，然后调整大小以适合(字体更改)。
下面的代码在 Chrome、Firefox 等中运行良好，但在 IE(7/8/9 版本，它也必须如此)中运行不佳。
在非 IE 中，文本会调整大小并很好地适合 textares，但在 IE 中，文本区域的每一行之间存在巨大差距。
我试过设置行高，但似乎不起作用。我读到它与 height of the font 有关，这意味着将每一行包装在一个跨度中并设置一个负的上边距。
非常感谢任何想法。
代码示例；
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);
});
最佳答案
将以下代码复制到一个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>
关于javascript - 文本区域中的行高(IE7)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13286286/