文章詳情頁
html5 - 只用CSS如何實現input框的寬度隨框里輸入的內容長短自動適應？
瀏覽：193日期：2023-01-28 16:41:16
問題描述
input框的寬度隨框里輸入的內容長短自動適應。如果用JS來獲取字符長度，再控制input框的width值，這樣很容易就能實現。但是只靠CSS來實現，這樣要怎么搞呢？
問題解答
回答1：一般不會讓框的長度隨內容自適應的，因為你不知道用戶會輸入多少字，萬一是1000字，你也一直變寬么
一般是用戶不輸入的時候寬度是一個小的值
用戶準備輸入的時候，輸入框拉長到一個值
回答2：CSS目前是沒有辦法實現這個，就算用了calc和css變量也不行
回答3：html5屬性contenteditable 可以通過max-width min-width達到你想要的
<p contenteditable='true' style = ’width:300px’>這是一段可編輯的段落。請試著編輯該文</p>回答4：
這種奇怪的需求也有啊,你這樣的話最好還是用min-width和max-width控制范圍.
標簽：
Html5
相關文章：
1. angular.js - angularjs的自定義過濾器如何給文字加顏色？2. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示？3. dockerfile - 為什么docker容器啟動不了？4. dockerfile - 我用docker build的時候出現下邊問題 麻煩幫我看一下5. macos - mac下docker如何設置代理6. javascript - web網頁版app返回上一頁按鈕在ios設備失效怎么辦？安卓上可以，代碼如下，請大神幫助，萬分感謝。7. javascript - 我的站點貌似被別人克隆了， google 搜索特定文章，除了域名不一樣，其他的都一樣，如何解決？8. mysql - AttributeError: ’module’ object has no attribute ’MatchType’9. javascript - webapp業(yè)務流程基本一致，多套主題（樣式基本不一樣，交互稍有偏差）管理，并且有不斷有新增主題，該如何設計組件化架構？10. javascript - es6中this
排行榜
網公網安備