html 输入尾部文本的只读剪切

Question

我的只读输入元素的值被截断了。有没有办法在不更改字体类型或字体大小的情况下更正此问题？ https://jsfiddle.net/hockchailim/tkg7a4c8/

<style>
input[readonly] {
  border: none;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  width: auto;
}
</style>
<input readonly="readonly" type="text" value="mmm.mmmm-mmmm@test.com">

Answer 1

将宽度更改为 100%

$(document).ready(function() {
    var count = $("#readonly").val().length;
    $("#readonly").css("width","calc("+ count +" * 0.85em)");
});

input[readonly] {
    background-color: transparent;
    border: none;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 3px 0 3px 0;
    padding: 2px;
    
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input id="readonly" readonly="readonly" type="text" value="mmm.mmmm-mmmm@test.com">