`
kstgjfk403
  • 浏览: 30778 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css2:div模拟textarea效果并实现高度自适应

阅读更多

样式如下:设置div最小高度并设置为auto,同时设置字体换行和边界换行即。div设置contenteditable="true"

即可实现文字编辑(contenteditable为html5新增属性)

div{
  float: right;
  margin-right: 45%;
  height: 50px;
  height: auto;
  min-height: 50px;
  width: 200px;
  border: 1px solid black;
  /*字体换行*/
  word-break: break-all; /*任意字内断开*/
  word-wrap: break-word; /*在边界内断开换行*/
 }

<div contenteditable="true"></div>

 

局限性: 可编辑div目前还不能有效实现动态监控 div内容的实时变化,无change监听事件。

分享到:
评论

相关推荐

    div模拟textarea文本域实现高度自适应效果代码

    当我们决定使用div来模拟具有高度自适应效果的textarea文本域时,可以借助CSS中的min-height和max-height属性来实现。min-height属性定义了元素的最小高度,而max-height属性则定义了元素的最大高度。如果内容不足以...

    Vue下textarea文本框根据内容自适应改变高度

    总的来说,创建Vue自定义组件`AutoHeightTextarea`可以方便地实现textarea根据内容自适应高度的效果,同时通过针对性的兼容性处理,可以确保在各种浏览器环境中都有良好的表现。在实际项目中,这样的组件可以大大...

    textarea高度自适应js代码

    4. **测量内容高度**:每次输入事件触发后,获取textarea的实时内容,然后在隐藏的div(或者使用其他方式)中模拟渲染这部分内容,测量这个div的高度。 5. **调整textarea高度**:将textarea的高度设置为测量得到的...

    css textarea 高度自适应,无滚动条

    以下是如何使用CSS来实现`textarea`高度自适应的方法。 首先,我们可以设置`textarea`的基本样式,例如宽度和溢出行为。例如: ```css .t_area { width: 300px; overflow-y: visible; } ``` 这段代码中,`width...

    html图片自适应手机屏幕大小的css写法

    总结以上知识点,我们了解到在HTML中使用CSS实现图片自适应手机屏幕大小的关键在于使用百分比宽度和自动高度的组合,确保盒模型的一致性,以及通过CSS Reset和重置默认布局减少浏览器间的差异。这些方法共同确保了在...

    新手学习DIV+CSS难点之经验总结

    ### 新手学习DIV+CSS难点之经验总结 #### 一、网页居中显示 要实现网页居中显示,需要从两个方面入手:一是对`body`进行设置,二是对外层的`div`进行设置。 **CSS示例代码:** ```css body { margin: 0 auto; /*...

    新手学习DIV+CSS难点之经验总结.pdf

    文字垂直居中显示可以通过在DIV中定义一个行高与其高度相同的方式实现。CSS代码为: ``` .title { height: 25px; line-height: 25px; vertical-align: middle; } ``` 三、图片垂直居中显示 图片垂直居中显示可以...

    div+css布局中常用方法汇总.docx

    1. **文本框textarea自适应高度**:可以通过设置`textarea`的`style`属性,如`overflow-y: visible`,使其随内容自动调整高度。 2. **鼠标指针样式**:使用`cursor: pointer`可以使元素的鼠标指针变为手形,提示...

    静态HTML/style/DIV布局技术重点

    - 表单处理:创建表单元素如、、&lt;textarea&gt;,并学习如何处理用户输入。 2. CSS(层叠样式表): CSS用于控制HTML元素的外观、布局和排版。掌握CSS的关键点包括: - 选择器:理解ID选择器 (#id)、类选择器 (....

    百度富文本编辑器ueditor上传图片宽高超范围问题2018.7.3补充

    1. 打开`Ueditor\themes\iframe.css`,在文件中添加以下CSS代码: ```css img { max-width: 100%; /* 图片自适应宽度 */ } body { overflow-y: scroll !important; } .view { word-break: break-all; } ....

    web前端期末大作业——HTML+CSS简单的旅游网页设计与实现

    - 使用`section`元素放置横幅图像,并设置宽度为100%,高度自适应。 - `article`元素使用了弹性布局,并通过`flex-wrap: wrap;`允许内容换行。 - `article div`内部的图像、标题和描述分别设置了相应的样式,包括...

    前端项目-react-textarea-autosize.zip

    由于它实际上是一个`div`元素,你可以通过`className`属性添加CSS类,或者直接使用`style`属性来覆盖默认样式: ```jsx style={{ resize: 'none', outline: 'none' }} className="custom-textarea" placeholder...

    web之html&css相关笔记

    - 圣杯布局:通过创建两个固定宽度的侧栏,中间内容区域自适应,实现三栏布局,两侧栏始终保持在顶部。 - 双飞翼布局:类似于圣杯布局,但通过额外的内部div调整布局,减少对祖先元素的影响,更适合国内前端框架。...

    CSS3秘笈 第3版 戴维·索耶·麦克法兰著 完整版PDF

    - **浮动布局案例**:实现左右两栏布局、多列布局等。 #### 八、CSS3动画 - **Transform**:改变元素的位置、大小、旋转角度等。 - **Transition**:定义在一定时间内如何平滑地完成属性值变化。 - **Animation**...

    HTML第1~13章 阶段总复习 代码练习 CSS.ACCP6.0

    4. 浮动与定位:学习浮动元素实现自适应布局,以及使用相对、绝对和固定定位创建复杂布局。 5. 相对单位与响应式设计:使用百分比和视口单位创建响应式网页,使页面在不同设备上呈现良好。 6. CSS3新特性:探讨渐变...

    工作商务CSS网页模板

    3. **DIV和CSS布局**:使用&lt;div&gt;标签作为容器,配合CSS的定位属性(如position: relative/absolute/fixed)、浮动(float)和Flexbox或Grid布局,可以实现灵活的页面布局。 4. **色彩和字体选择**:白色背景通常...

    设置contenteditable属性可编辑HTML标签的内容(可代替textarea)

    开发者只需要在CSS中为可编辑的div设置一个最小高度和宽度,div的高度会随着内容的增加而自动增长,这样就能实现类似textarea的高度自适应效果。 值得注意的是,在使用contenteditable属性时,需要注意一些细节问题...

    BootStrap表单控件之文本域textarea

    2. `&lt;textarea&gt;`: 这是HTML的文本域元素,`name`属性用于指定输入字段的名称,`id`用于唯一标识元素,`cols`和`rows`定义了文本域的初始宽度和高度。 3. `class="form-control"`: 这个类是Bootstrap为表单控件提供的...

    HTML+CSS鲜花网页制作 DW静态网页设计 个人网页制作

    - **DIV+CSS**:这是一种常见的网页布局方式,通过将页面划分为不同的区块,并利用CSS对这些区块进行定位和样式设置,实现更加灵活和易于维护的网页布局。 - **Flex布局**:虽然案例中没有明确提及Flex布局,但这种...

    css常见问题 (2).pdf

    理解这两个核心概念对于优化CSS布局和实现预期的视觉效果至关重要。正确地应用`padding`和`margin`以及`box-sizing`,可以极大地提升网页设计的灵活性和响应性,避免布局被意外破坏。在实际开发中,熟练掌握这些技巧...

Global site tag (gtag.js) - Google Analytics