css input 内容换行显示,CSS文本换行详解

最新推荐文章于 2024-02-18 16:54:12 发布
VIP文章 最新推荐文章于 2024-02-18 16:54:12 发布
阅读量9.7k 收藏
点赞数
文章标签： css input 内容换行显示

还记不记得昨天发表的《table表格那点事儿》最后的一个问题不？先撇开问题，我们从头说起。

在网页排版中，有些时候是需要文本自动换行的，对于中文来讲，无需设置属性即可自动实现换行，但是对于英文文章呢？附一段源码：

CSS wraps text explanation - art collection design

英文是什么意思呢？其它我是直接把汉字(CSS文本换行详解---艺灵设计)放百度里面翻译的，坑爹的是：当我把翻译后的英文放进去再次翻译时，妹的竟然汉语发生了变化。唉，伤不起啊！不说了，回题，在此只以演示效果为准！ 亲们来猜猜上面那行代码在各浏览器中的执行效果如何？还是不难为各位亲了，直接上图一张：

072058e2cd17301f53f374952df95a38.png

发现什么没？根本就不需要写换行的属性就可以换行。你在想什么？难道在想各大浏览器厂商已经修复了bug?再附一段源码：

CSS;wraps;text;explanation;-art collection design

附截图一张：

最低0.47元/天 解锁文章
司梦化虚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue - 实现 textarea 多行输入框的 placeholder 换行显示功能，让 input（type=textarea）输入框 placeholder 灰色描述文字识别 \n 断行显示教程
王佳斌
09-20 4317
vue，textarea多行文本输入框，input type=textarea多行输入框文本，vue如何将textarea多行输入框的placeholder换行显示，vue怎么让placeholder断行显示，vue项目多行输入框placeholder灰色提示文字换行断行显示，vue实现placeholder识别\n并且换行，vue输入框placeholder不识别\n转义字符怎么办，在input、textarea 标签的placeholder中实现换行的方法，vue框架下,textarea怎样写出多行的p
举例详解CSS3中的Transition
01-19
1.会伸缩的搜索表单 常在 sf.gg 混的人都知道，它的顶部导航栏是这样的： 当输入框获得焦点就会变成这样的： 利用 CSS3 的 Transition 属性，我们可以简单做出一个类似的搜索表单出来： HTML 标记： XML/HTML Code复制内容到剪贴板 <header>       <form action=# method=post class=searchForm>           <label u00a0for=search>search</label>           <input type=search id=searc
CSS自动换行
02-02
自动换行五种策略，兼容IE Chrome Firefox
多个input组成的记事本，当前行input文本溢出时自动聚焦到下一行input，回车自动切换下一行
最新发布
weixin_42206276的博客
02-18 891
解决办法：字符串删除最后一个字符最后完美解决打印预览的效果图如下:ZYBIShiftHShiftUShiftOShiftCShiftKShiftLShiftGFGMarkdownText-to-HTMLAuthorsJohnLuke。
详解HTML的<input> 标签及其禁用方法
09-28
主要介绍了详解HTML的input标签及其禁用方法,归纳了几种CSS中使用disabled属性实现禁用的方法,需要的朋友可以参考下
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
首先把模板代码上上来: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!--判断IE9 用来支持HTML5 ht
详解CSS标签中的显示模式
11-21
标签的显示模式（重点） div和span标签 ​1.样式完全相同，标签不同，显示的结果完全不同 ​2.每个div会独占一行，多个span会并列一排 1.块元素 特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示—div ul li p h 示意图 总结：块元素可以添加宽高的属性，独占一行 2.行元素 特点：宽高默认都是0，不能设置宽和高，一行显示—-span b i u a 示意图 总结：对宽高不敏感，不能独占一行 3.行内的块元素 特点：只能设置宽和高，不能换行显示—img input 示意图 多学一招：从大的方面来说，其实行内的块元素也属于行内元素
CSS样式总结（1）
个人学习笔记
07-24 931
1.溢出时实现滚动条 2.识别回车 3. 文本展示自动换行（textarea自动换行）
css input 内容换行显示,CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉...
weixin_39905725的博客
08-03 5038
*:focus {outline: none;}input::-ms-clear {display:none;}一般的文字截断(适用于内联与块)：.text-overflow {display:block;/*内联对象需加*/width:31em;/*指定宽度*/word-break:keep-all;/* 不换行 */white-space:nowrap;/* 强制在同一行内显示所有文本，直到文...
25个常用易忘CSS小技巧
weixin_44912745的博客
07-26 103
25个常用易忘CSS小技巧
总结html，css中的各种换行方法
热门推荐
南北极之间
01-18 2万+
一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
input 换行
yingchengzzz的博客
07-22 8363
input换行。
jquery选择器之属性过滤选择器详解
11-30
代码如下:<style type=”text/css”>  /*高亮显示*/  .highlight{      background-color: gray  } </style> 代码如下:<body>   <div>      <p>Hello</p>   </div>   <div id=”test”>ID为test的DIV</div>   <input type=”checkbox” id=”s1″ name=”football” value=”足球” />足球   <input type=”checkbox” name=”volleyball” value=”排球” />排球  
CSS 字体库/placeholder/input背景色/换行/小三角/滚动条
WangYan的博客
08-30 565
文章目录碎片自定义字体库防止双击选中文字CSS小三角CSS混序字符串换行的问题重写placeholer自定义滚动条 碎片 1.overflow:hidden需要配合外层dom的height：100%使用。 2.:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。其中n可以是数字、关键词或公式。 自定义字体库 导入字体库，如图： 然后在全局样式库，或局部样式库按以下方式渲染自定义字体： @font-face { font-family: 'Digital dream F
Input标签实现回车换行
qq_42309685的博客
08-16 1万+
input标签实现回车换行 效果如下： head部分 <script src="lib/jquery/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <style> .wrap { padding: ...
小程序 input 换行_好程序员web前端学习路线分享CSS浮动-文档流篇
weixin_39600704的博客
12-01 1001
1、纯文本的排列。文档流就像我们的文本内容一样，所有的文字都会紧挨着，一个个排列下来，如果到了边界，就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距，因为英文中每个单词之间是有距离的，不像中文每个汉字连在一起的。所以不管你敲了几个回车，不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。下图中的红色箭头就是我们敲了回车和敲了空格的效果。2、文...
输入框自动换行
aybaiwan的博客
07-06 5444
解决输入框不能自动换行问题，为input标签添加type="textarea" 属性；这里的 :rows="9" 是指设置 input输入框所占区域的行数，即高度，有几行；当输入内容超过9行时，自动换行。
输入框内容可换行
qq_43765727的博客
12-12 1684
输入框内容可换行
两行换行，尾部加省略【CSS样式】
Shaw_Jie的博客
11-24 315
两行换行，尾部加省略【CSS样式】
css input换行
07-28
在CSS中，如果想要实现input字段的换行，可以使用以下方法： 1. 使用div/p/br标签：可以在input字段前后插入div、p或br标签来实现换行效果。这种方法简单易行，但可能会插入一些无意义的标签，同时将布局与内容混为一体\[2\]。 2. 使用label包裹input并设置display: block;：可以使用label标签将input字段包裹起来，并设置display属性为block，使其独占一行显示。这种方法逻辑上更符合label是input的修饰件的概念\[2\]。 3. 使用CSS属性word-wrap、word-break：可以通过设置word-wrap和word-break属性来控制input字段的换行。例如，设置word-wrap: break-word;可以在超出长度时允许在单词内换行，设置word-wrap: keep-all;则只能在半角空格或连字符处换行，设置word-break: break-all;可以在超过长度时自动换行\[3\]。 综上所述，可以根据具体需求选择适合的方法来实现input字段的换行效果。 #### 引用[.reference_title] - *1* *2* [用 CSS 给 FORM Input 换行](https://blog.csdn.net/pinxue/article/details/45397369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [CSS样式总结（1）](https://blog.csdn.net/weixin_42078672/article/details/125494018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值