HTML

<div class="wrapper">
    <div class="highlighter" id="overflowText"></div>
    <textarea id="textarea1" maxlength="200"></textarea>
</div>
<div id="counter">Letters remaining: 140</div>
<input type="Button" value="Done" id="doneButton"></input>

CSS

* {
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: normal;
}
.wrapper {
    position: relative;
    width: 400px;
    height: 100px;
}
.wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    resize: none;
    white-space: pre-wrap;          /* CSS3 */   
    white-space: -moz-pre-wrap;     /* Firefox */    
    white-space: -pre-wrap;         /* Opera below 7 */   
    white-space: -o-pre-wrap;       /* Opera 7 */    
    word-wrap: break-word;          /* IE */
}
.highlighter {
    background-color: #eee;
    color: #f0f;
}
.highlight {
    background-color: #fd8;
    color: #f0f;
}
textarea {
    background-color: transparent;
    color:#000;
}

JAVASCRIPT

function limitTextSize(e) {
    var max = 140
    var txt = $("#textarea1").val();
    var left = txt.substring(0, max);
    var right = txt.substring(max);
    var html = left + '<span class="highlight">' + right + "</span>";
    $("#overflowText").html(html);
    $("#counter").html("Letters remaining: " + (max - txt.length));
    $("#doneButton").attr("disabled", txt.length > max);
}

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}
$(document).ready(function() {
    $("#textarea1").bind('input propertychange', limitTextSize)
    maxLength($("#textarea1"));
});

它使用JQuery

它除了在Firefox上有效。要查看错误，请将其粘贴到textarea：

fjdf hkj hfj hdfkjsd hfllll sdfl sdlflldsf lsdlf flsdlf lsdf lsdf llsdfls dlfs ldflsd f

这暴露了div和textarea之间格式的细微差别（仅在firefox中）。我已经将“隐藏”文字设为紫色，因此您可以看到自动换行。

我看过这里：How to force Firefox to render textarea padding the same as in a div?

在这里：Wrapping the text the same way in a div as in a textarea

在这里：Firefox textarea sizing bug?

但这些似乎都不适用......

我想过尝试让它成为一个令人满意的div，但是改变事件看起来就像雷区。

这里有没有人成功完成这项工作？

Answer 1

我认为您遇到的问题是Firefox在1.5px元素中添加了textarea填充。

Firefox过去曾在some issues中使用paddings获得了combination with textareas，我认为您可能无法摆脱这些额外的1.5px填充。< / p>

我能够通过在div.highlighter上设置一些供应商特定的前缀CSS属性来解决您的包装问题。这是一个 jsFiddle 。

.highlighter {
  background-color: #eee;
  color: #f0f;
  -moz-box-sizing: border-box;
  -moz-padding-end: 1.5px;  
  -moz-padding-start: 1.5px;      
}

设置这些属性可确保

在Firefox中，div上的填充设置不会增加div的宽度，
在Firefox中，1.5px的左侧和右侧都会设置填充div。

更新

在使用2px一段时间之后仍然偶尔遇到一些包装不一致的问题，我决定给1.5px一个去，现在似乎已经解决了偶尔出现的不一致问题。

Answer 2

这与使用的字体大小有关。由于使用的单位是point (pt)，因此在浏览器中计算的大小不同，导致错误的换行。

请尝试使用这些样式：

* {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
}

body {
    font-size: 1em;
}

JSFiddle

您可能必须更改容器大小以适应font-size的更改。

Answer 3

好的，有几件事在这里发生。通常，您可以找到的最安全的跨浏览器显示元素是pre标记。它假定你正在喂它的是＆＃34;预先格式化，＆＃34;由此得名。这将使我们从以下几个方面受益：

据我所知，pre元素上的任何主要浏览器都没有默认样式。
pre元素将在框中保留前导/尾随空格，制表符和其他特殊字符。

将span.highlighter替换为pre.highlighter

那会让我们开始。我们要看的第二件事是重叠的颜色在Firefox中创建了一些相当奇怪的堆叠效果。该文本在FF20中看起来没有焦点，我只能想象让浏览器决定看起来如何将是一场灾难。

将textarea的颜色设置为transparent。

现在我们在那里。我在IE10 / 9，FF20和Chrome 26中看到了一致的包装。

<强> Here's an example jsFiddle

除Firefox外，Div和textarea的行为相同 - 怎么办？

HTML

CSS

JAVASCRIPT

3 个答案:

更新