H5C3 css3实现div 模拟Input框应用场景：输入地址的输入框不用textarea的情况下（输入框超过宽度自动换行）

最新推荐文章于 2024-02-18 16:54:12 发布

A-fish

最新推荐文章于 2024-02-18 16:54:12 发布

阅读量1.8k

点赞数

分类专栏： CSS3 杂记文章标签： h5c3 div模拟input框输入框超过宽度自动换行

本文链接：https://blog.youkuaiyun.com/sally18/article/details/97641895

版权

本文展示了如何使用CSS3样式创建一个div，使其模拟Input输入框的效果，包括宽度限制、自动换行功能。通过设置contenteditable属性，使div具有编辑功能，并利用word-break和word-wrap属性实现文字超出宽度时自动换行。同时，通过CSS3选择器`:empty`和`:before`来处理占位符的颜色和显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
   <title>css3 语法实现div模拟Input</title>
   <style type="text/css">
               /* div模拟输入框*/
       .imitate-input{
       width: 120px;
       border: 1px solid dodgerblue;
       padding: 6px 10px;
       size: 16px;
       line-height: 16px;
       outline: none;
       color: #000;
       overflow-x: scroll;
       overflow-y: hidden;
       display: inline-block;
       vertical-align: middle; /*相邻的两个元素中线对齐*/
       word-break: break-all; /*超出长度允许在单词内换行*/
       word-wrap: break-word; /*超过长度自动换行*/
       text-align: left; /*输入框内容从左开始驶入*/
       }