<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#demo {
padding: 0;
border: 0;
color: rgba(40, 99, 243, 1);
background-color: transparent;
border-bottom: 1px solid #333;
width: 90px;
-webkit-appearance: textfield;
-webkit-writing-mode: horizontal-tb !important;
-webkit-rtl-ordering: logical;
text-rendering: auto;
display: inline-block;
overflow: visible;
outline: none;
font-family: 微软雅黑;
font-size: 14px;
text-align: center;
}
</style>
<body>
<input id="demo" type="text">
</body>
<script>
var demo = document.getElementById('demo')
demo.addEventListener('input', function () {
var n = document.createElement('span');
n.style.display = "inline-block"
n.style.whiteSpace = "pre"
n.style.maxWidth = "100%"
n.style.fontSize = "14px"
n.style.fontFamily = "微软雅黑"
n.innerHTML = demo.value;
demo.parentNode.insertBefore(n, demo.nextSibling);
var spanW = n.getBoundingClientRect().width;
demo.parentNode.removeChild(n)
demo.style.width = spanW + 'px'
})
</script>
</html>
