textarea文本域设置padding会文本溢出问题

已于 2022-05-17 16:14:24 修改
阅读量1.3k 收藏
点赞数 1
文章标签： css
于 2022-05-17 16:12:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43964369/article/details/124823753
版权 
<view class="textarea-box">
      <textarea class="textarea" placeholder='' maxlength="200" ></textarea>
</view>

直接设置textarea的padding会溢出，可以在外面加一个元素设置宽度，即在textarea-box上设置文本域的宽度，然后再设置textarea的宽度为100%，再设置textarea的padding就会正常显示。
看网上分析是因为文本域的宽度不是100%的话不能自适应盒子的变化

﹎я゛诗词几句。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在textarea文本域中显示HTML代码的方法
12-10
这是一个iframe 的 给你一个参考的：  代码如下:  <iframe ID=”tryit” MARGINHEIGHT=”1″ MARGINWIDTH=”1″ width=”100%” height=”300″ scrolling=”auto”></iframe>   ...
小程序textarea在ios中内边距的解决办法
m0_46476533的博客
01-18 2686
小程序textarea在ios中内边距的解决办法 官方文档上面有一个 disable-default-padding 属性去除在ios上面的内边距
textarea padding问题以及在ie下开始就显示了滚动条
weixin_34223655的博客
01-11 130
为什么80%的码农都做不了架构师？>>> ...
css textarea给padding导致溢出
weixin_40365953的博客
10-23 4064
比如这样：  因为textarea不包含内边距与边线所以即使给固定的宽高也会溢出，所以加上： 那就通过加上box-sizing:border-box让它拥有内边距与边线。
【html系列】div中会padding会溢出
IU
04-16 627
<div> <span class="is_span">这是span</span> </div> css .is_span{ padding:10px; } 此时会造成空间溢出 如下图 解决方法 //给span加上样式 display: inline-block; 给最外层添加overflow：hidden也行 不过 span的padding就失去了效果 ...
css width:100%； padding:10px；导致宽度溢出
m0_55301924的博客
02-16 309
width: 100%; padding: 10px; 导致宽度溢出
解决textarea在ie浏览器下宽度溢出的问题
无止境学的博客
12-02 358
解决textarea在ie浏览器下宽度溢出的问题的方法是： 给textarea元素定义宽度，并且padding,margin,border都是0,而不是使用 textarea 元素的 rows和cols属性。
小程序textarea在IOS有默认padding
qq_40509733的博客
08-23 440
textarea 标签添加属性disable-default-padding="{{true}}"
textarea文本域宽度和高度width及height自动适应实现代码
09-28
本文为大家介绍下textarea文本域宽度和高度（width、height）如何自动适应变化处理，下面有个不错的示例，感兴趣的朋友可以参考下
div模拟textarea文本域实现高度自适应效果代码
11-21
一、关于textarea文本域以及高度自适应 textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框： 作为多行文本域功能来讲，textarea满足了我们...
JS限制Textarea文本域字符个数的具体实现
10-27
介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下
textarea 使用 padding，同时避免被拉伸
纠缠AI的亮子
03-21 2163
解决办法就是改用 box sizing 盒模型： width:100%; height:100%; box-sizing: border-box; /* For IE and modern versions of Chrome */ -moz-box-sizing: border-box; /* For Firefox */...
textarea标签莫名其妙多出很多空格（已解决）
刺心的博客
08-18 672
解决方案： 把<textarea>和</textarea>标签写到一行，不要换行即可
微信小程序文本溢出的处理方法
技术分享
05-10 9341
如果是一行显示的时候，写在view里的样式，会在最后显示省略号，但要是写在text组件中设置这个样式的话就是最后多出来的字隐藏了。.textview{  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap}当然 有单行的省略 就有多行，不过多行的设置的有点复杂：.textview{  display: -webkit-b...
textare超出问题
the_old_boy的博客
11-13 719
一、textare超出父容器 情景如下： 修复后如下： 1、原因： textarea带有默认固定宽高（类似的问题：images也自带固定宽高） 2、解决方案： 给textarea重新定义宽度，我是给textarea加了一个class，在它里面定义width=100%，由于class样式的优先级大于标签样式，所以会覆盖原有样式。 3、解决方案代码： //index.less .out-box...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
tianyaluqingchen的博客
04-11 1979
文字长度过长显示省略号的样式设置方法众所周知： .css { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 然而在弹性盒子模型中发现在添加white-space: nowrap;属性后，宽度自适应部分失效了，导致过长的文本撑开了布局，进而布局撑出了屏幕外。虽然省略号显示了，但是父元素的自适应宽度完全失效了。 经过搜索排查分析，发现是display: flex;影响的white-space: now
ie7下使用white-space:nowrap时padding-right失效问题记录
Web前端开发
03-15 1236
chrome下效果： ie7下效果：
css中设置padding无效的问题
m0_73814236的博客
02-16 1747
子元素宽度设置为100%时，给子元素添加padding不生效。
JavaScript 代码实现 textarea 实现高度自适应。
qq_39025452的博客
06-11 142
function readyNumber() { $('textarea').each(function () { this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;'); }).on('input', function () { th...
iview textarea文本域autosize render写法
最新发布
11-17
在上述代码中，我们首先引入了i-textarea组件，并使用v-model指令绑定了textareaValue的值，通过autosize属性设置了文本域的最小行数和最大行数。这样，当用户在文本域中输入内容时，文本域会根据输入的内容自动扩展...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值