HTML輸入只讀截尾的文本

我的只讀輸入元素的值被截斷。有沒有辦法糾正這種情況，而不改變字體類型或字體大小？ https://jsfiddle.net/hockchailim/tkg7a4c8/HTML輸入只讀截尾的文本

<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="[email protected]">

來源

2016-07-22 HockChai Lim

改變輸入的大小。您唯一的選擇是更改字體大小或輸入大小。我也建議不要試圖根據它的值設置輸入的寬度，這可能會導致各種奇怪的情況。 – hungerstar

變化寬度爲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="[email protected]">

來源

2016-07-22 20:59:17

那麼，有沒有辦法讓它自動展開（如td）？ –

我刪除了寬度並添加了按照字符數計算的jQuery這種方式它會自動擴展，我希望這有助於:) –

那麼...你不想改變字體類型/大小？輸入寬度怎麼樣？獲取width:250px而不是自動修復問題。

來源

2016-07-22 20:57:52 nicael

HTML輸入只讀截尾的文本

回答

相關問題