textarea文字怪异的居中解决办法

最新推荐文章于 2023-12-08 10:19:00 发布
原创 最新推荐文章于 2023-12-08 10:19:00 发布 · 643 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Google #浏览器 #HTML

本文解决了textarea内的文字不居左的问题。通过调整HTML代码格式，确保内容在同一行内书写，避免了浏览器自动插入<br>标签导致的文字错位。 
textarea文字怪异的居中解决办法

每次文字从数据库读到textarea后文字都不居左。在排出样式，转义字符等问题后，baidu,google了一会始终没找到答案。后来发现原来问题出在HTML上

<textarea>
内容内容
</textarea>

上面这句看似格式漂亮的HTML语句在textarea下确是有问题的。浏览器会解析为

<textarea><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;内容内容</textarea>
可见在写<textarea>时一定要写成
<textarea> 内容内容</textarea>   必须写成一行就可以了。这叫什么事啊。

 

 

个人签名

-------------------------------------

 

图盾 淘宝保护 保护图片 图片防盗 

 

前端基础总结--CSS
chenyouleww的博客
07-08 726
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
css学习
weixin_68658847的博客
09-03 820
基础css学习
textarea文本居中的问题
爱跳舞的程序员
12-08 1010
核心： 水杯居中用 text-align: center;垂直居中用 (其中数字30相同就行不一定是30) height: 30px; line-height: 30px; 更多学习，可参考https://www.python100.com/html/57600.html 个人实战案例 .myTextArea { border: 0px...
解决textarea标签中的文字居中的问题
qq_44864879的博客
08-24 6962
解决<textarea>标签中的文字居中的问题 前些日子在开发中遇到了<textarea>标签中的文字居中显示，记个随笔，一般来说<textarea>标签中的文字在左边会比较好，有时候会居中： 这种情况都是我自己弄成的，为了让代码格式规范点，写成了下面这样子： 这样看着算是规范，但导致了<textarea>标签中的文字自动居中，浏览器会解析为 &...
css多行文本垂直居中
09-27
css 多行文本垂直居中显示，兼容各大浏览器！
＜textarea＞标签的文字居中解决方法
10年职场两茫茫，35岁凄凉奈若何
07-01 849
<textarea>标签的文字居中解决方法
CSS基础：界面样式和 图片文字居中（vertical-align）
u011863822的博客
03-11 2844
界面样式 所谓的界面样式，就是更改一些用户的操作样式，进而提供更好的用户体验。 其中说一下常用的三种。 更改用户的鼠标样式。 表单的轮廓。 防止表单域拖拽 鼠标样式 cursor 有很多属性，就聊一下常用的几个： 属性 描述 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 演示： <!DOCTYPE html> <html lang="en"> <head> &lt
最新Web前端面试题精选大全及答案
热门推荐
HanXiaoXi_yeal的博客
01-07 19万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
常见的CSS面试题(附答案)
qsj0606的博客
03-08 859
常见的CSS面试题(附答案) 1、CSS有哪些基本选择器？它们的权重是如何表示的？ CSS基本选择器有类选择器、属性选择器和ID选择器。 CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。 通常将权重分为4个等级，可用0.0.0.0来表示这4个等级。 ！important关键字优先级最高。 注意：！importont井非选择器，而是针对选择器内的单一样式设置的。当然，不同选择器内应用 ！important的权重也是不一样的，例如，在id选择器
CSS基础标签.md
04-14
- **怪异盒模型**：实际宽度 = `width`，内容区域宽度 = `width - left border - right border - left padding - right padding`。 - **行内盒模型**：涉及垂直对齐(`vertical-align`) 和水平对齐(`text-align`)。 ...
解决<textarea>标签中的文字莫名其妙的居中的问题
weixin_33933118的博客
02-21 364
2019独角兽企业重金招聘Python工程师标准>>> ...
关于textarea无法居中的问题
Site_Dave的博客
02-12 3741
元素居中,使用margin:0 auto;就可以了， 今天看到textarea没有居中 倒不是因为没有加宽高，而是因为textarea为行内元素， 需要使用display:block;转化成块级元素才行 看了别人的博客，善于仔细研究的人，还研究出了div中嵌套textarea的方法，让div中的元素居中./佩服 还有就是div使用overflow:hidden;
textarea标签居中
yao_1996的博客
12-21 5140
html中标签居中写法： &lt;textarea&gt; 换行写就会居中，居左居右属性失效 &lt;textarea&gt; 左对齐、右对齐 &lt;textarea style="text-align: right" &gt;要想居左，居右属性可用就得这么写&lt;textarea&gt; ...
Textarea标签中文字显示异常
OArthurO的博客
11-25 783
有时Textarea标签中文字显示为上下，左右居中，异常显示。 主要原因是标签与文字没在同一行上，必须将标签及要显示的文字写在同一行上。 eg: &lt;textarea name="sample" cols="10" rows="10"&gt;sample&lt;textarea&gt; ...
css设置文字垂直居中
qq_23392319的博客
06-25 3646
css设置文字垂直居中
textarea标签内的文字无缘故居中解决原因
weixin_30784141的博客
02-08 169
<textarea> 内容内容 </textarea> 浏览器会解析为 <textarea><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;内容内容</textarea> 可见在写<textarea>时一定要写成 <textarea>内容...
textarea 文字居中
最新发布
02-07
### 实现 Textarea 文字居中 为了使 `textarea` 内的文字既水平又垂直居中，可以采用多种方法。以下是基于提供的参考资料并结合实际应用的一种有效方案。 #### 方法一：使用 Flexbox 布局 Flexbox 是一种强大的布局工具，能够轻松实现子元素在容器内的灵活排列。对于 `textarea` 的文字居中问题，可以通过将其包裹在一个具有特定样式的 div 容器内来解决： ```html <div class="container"> <textarea></textarea> </div> <style> .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 200px; /* 设置高度以便观察效果 */ } textarea { width: 80%; height: 50%; padding: 10px; box-sizing: border-box; } </style> ``` 这种方法利用了 Flexbox 的特性，通过设置 `.container` 的 `display`, `justify-content` 和 `align-items` 属性，实现了内部 `textarea` 及其内容的完美居中[^1]。 #### 方法二：调整 Line Height 和 Padding 另一种较为传统的方法是直接操作 `textarea` 自身样式，适当增加行高 (`line-height`) 并配合填充 (`padding`) 来达到视觉上的居中效果: ```css textarea.centered-text { line-height: normal !important; /* 防止某些浏览器默认行为影响 */ padding-top: calc((200px - 1em * font-size) / 2); /* 动态计算顶部间距 */ text-align: center; /* 水平居中 */ resize: none; /* 禁止用户改变大小 */ overflow: hidden; /* 处理超出部分隐藏 */ } ``` 此法适用于固定尺寸的 `textarea`，其中的关键在于合理设定 `padding-top` 的值以确保文本始终处于中间位置[^3]。 然而需要注意的是，在现代 Web 开发实践中推荐优先考虑 Flexbox 或 Grid 这样的弹性布局技术，因为它们提供了更强大且易于维护的方式来处理复杂的页面结构和响应式设计需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值