解决Elementui输入框(text)与文本域(textarea)字体不一样问题

最新推荐文章于 2025-03-31 15:13:14 发布

好奇的菜鸟

最新推荐文章于 2025-03-31 15:13:14 发布

阅读量6.5k

点赞数 12

文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/qq_29752857/article/details/122669892

版权

本文介绍了解决在Element UI框架中使用textarea组件时遇到的文字显示不一致的问题。通过调整.el-textarea__inner的字体属性，实现了统一的字体样式，确保了单行和多行文本的一致性。

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

一、现象

测试反应，单行文本里边的文字和多行文本里边的内容不一样，效果如下：

二、修改方法

通过BAIDU，发现是原生textarea默认字体问题

增加.el-textarea__inner字体属性，问题得到解决

Element - The world's most popular Vue UI framework

.el-textarea__inner{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

三、测试

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

好奇的菜鸟

关注关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Android实现textArea文本域的输入框 (附完整源码)

希望我的博客，能帮上你解决学习中工作中所遇到的问题

10-28

Android实现textArea文本域的输入框 (附完整源码)

element-ui 文本域字体不一样

wcy0112的博客

03-06

500

这是原生textarea默认字体问题，所以需要增加.el-textarea__inner字体属性。发现其他表单组件字体和文本域字体不一样。

1 条评论您还未登录，请先登录后发表或查看评论

element-ui中的el-input 和el-textarea中的placeholder字体不一样

liuli0927的博客

07-14

921

font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

Element ui input组件类型为 textarea 时没有清空按钮

热门推荐

飞鸟的轨迹

02-26

1万+

文本框Text //添加身份证号码校验 var creditCard = Ext.create('Ext.form.field.Text', { fieldLabel : '身份证号', name : 'creditCard', renderTo : 'creditCardDiv', labelAlign : 'right', emptyText: ...

解决el-input输入框(text)与文本域(textarea)字体不一样问题

多看书少吃饭的博客

05-05

2579

解决el-input输入框(text)与文本域(textarea)字体不一样问题

element ui 文本域el-textarea的计数限制不遮挡输入的文字

锦瑟年华L的博客

11-29

7010

element ui 文本域el-textarea的计数限制不遮挡输入的文字

改变input，textarea字体颜色

那一刻的博客

11-05

965

效果图 input { text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent; } input::-webkit-input-placeholder{ color:#ccc; text-shadow: none; -webkit-text-fill-color: initial; }

修改el-input、textarea、el-checkbox的禁用状态下的颜色

qq_1336674576的博客

02-25

6033

修改el-input、textarea、el-checkbox的禁用状态下的颜色

elementUI textarea可自适应文本高度的文本域

maoge_666的博客

09-04

1747

elementUI textarea可自适应文本高度的文本域

ElementUI

m0_74343097的博客

01-20

3770

ElementUI

elementui 文本域el-textarea的计数限制不遮挡输入的文字

細水、長流√的专栏

09-10

2120

【代码】elementui 文本域el-textarea的计数限制不遮挡输入的文字。

【element-ui】 textarea输入框数据统计遮挡输入文字

hippyoo的博客

01-10

2263

解决方案：背景透明色，文字放到右下角

element-plus的el-text组件（文本组件）的介绍和使用

lucky_ly的博客

06-08

2800

el-text（文本操作的组件）

elementUi文本域怎么设置字体样式和普通输入框的字体样式一样

05-20

可以通过设置 `textarea` 的样式来实现文本域的字体样式与普通输入框的字体样式相同。具体步骤如下： 1. 首先，给 `textarea` 添加一个 `class`，例如：`my-textarea`。 2. 在 CSS 样式中设置 `.my-textarea` 的样式，其中包括 `font-family`（字体），`font-size`（字体大小），`line-height`（行高）等属性。例如，以下 CSS 样式可以将 `.my-textarea` 的字体样式设置为与普通输入框相同： ```css .my-textarea { font-family: inherit; /* 继承父元素字体 */ font-size: inherit; /* 继承父元素字体大小 */ line-height: normal; /* 恢复默认行高 */ padding: 6px 12px; /* 设置内边距，使其与普通输入框一致 */ } ``` 3. 在模板中使用 `el-textarea` 标签，并设置 `class` 为 `my-textarea`。例如： ```html <el-textarea class="my-textarea" v-model="textareaValue" :autosize="{minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-textarea> ``` 这样，就可以实现文本域的字体样式与普通输入框的字体样式相同了。