使用Div自动换行一事

最新推荐文章于 2024-07-17 11:27:56 发布
转载 最新推荐文章于 2024-07-17 11:27:56 发布 · 154 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xioxu/archive/2010/06/24/1764394.html

本文介绍了HTML中DIV与SPAN两种元素的区别。DIV作为一个块级元素，会独立占据一行，适合用于组织结构化的页面内容；而SPAN作为行内元素，主要用于应用样式，不会引起换行。通过了解这两种元素的不同用法，有助于更合理地进行网页布局。

自己还是对css或者html方面太差，今天发现使用Div后导致了换行，仔细一查原来这是规范，换成span即可。

DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。

而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

 

行内元素是指该元素标记的内容不不会对现在的结构造成影响，属于应用样式，辅助应用样式表等作用；

而块级元素为一个块状，单独占据一行，相当于在一个该元素前后各加一个换行。

转载于:https://www.cnblogs.com/xioxu/archive/2010/06/24/1764394.html

精选资源
html内容超出了div的宽度如何换行让内容自动换行
01-19
在工作中评论内容测试遇到评论着的评论内容为：“dddddddddddddddddddddddddddddddddddddddddddddddddd”，错误的评论，在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要...
html中div不自动换行、强制不换行的具体实现
09-28
本文将详细介绍实现`div`不自动换行的几种方法。 首先，需要明确什么是自动换行。自动换行指的是当元素内容超出其父元素的宽度时，元素会自动移动到下一行。这种行为在大多数布局中是必需的，但也存在例外情况，...
DIV的内容自动换行
大任的网络专栏
04-07 1054
DIV的内容自动换行 2009年07月25日 星期六 19:27 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行 它们的区别就在于： 1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单 词很长（congra
Div 自动换行问题
liu510817387的专栏
11-05 713
<br />兼容 IE 和 FF 的换行 CSS 推荐样式：<br /><br />最好的方式是<br /><br />word-wrap:break-word; overflow:hidden;<br /><br />而不是<br /><br />word-wrap:break-word; word-break:break-all;<br /><br />也不是<br /><br />word-wrap:break-word; overflow:auto;<br /><br />这种最好的方式，在 IE
有关div自动换行的研究（包括兼容性）
childhooders的专栏
12-21 2171
 1,正常的、已经断了句（即已经有标点符号）的中文字段或英文字段，当这行字达到层的给定宽度时，就自动换行：HTML代码div style="width:345;">如果负数是虚构出来的话，那么虚数也是虚构的。虚数是为了给负数开方根的需要而提出来的。就像求“两个数的和是10，积是40的数。”我们只能说没有实数解，不能说不存在这样的数，因为负数是存在的，所以负数的N方根也应该存在，不然就不应该有负数的
【IDEA】idea自动换行
voidfaceless的博客
11-27 1395
idea自动换行 对单个文件：View > Active Editor > Use Soft Wraps 整个编辑器：Preferences > Editor > General > Use Soft Wraps in Editor 如果还是不行，可以在这里添加你的文件类型 ...
百分比布局实现div自动换行
最新发布
每一篇博客都是对自己技术的沉淀
07-17 359
这是个寂寞的天，下着有些伤心的雨</div><div class="con">这是个寂寞的天，下着有些伤心的雨</div><div class="con">这是个寂寞的天，下着有些伤心的雨</div><div class="con">这是个寂寞的天，下着有些伤心的雨</div><div class="con">这是个寂寞的天，下着有些伤心的雨
vue flex 布局实现div均分自动换行的示例代码
12-28
 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客，我们主要用到flex布局的一个换行属性，它是flex-wrap: wrap，自动换行。 二、vue代码 （1）html部分： <div...
div中英文无法自动换行的解决办法
12-11
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远...div中英文自动换行 复制代码代码如下: <div style=”word-break:break-all;width:20px
解决因div导致的换行问题
进化的深山猿
09-19 2215
<div class="btn-group" style="cursor: move;margin: 3px 3px;"> <div style=""> <button type="button" class="btn btn-sm" title="{{param.title}}" ng-class="{true:'btn-primary',false:'bt...
css + div 常用的3种横向排列自动换行
MoXinXueWEB的博客
08-25 9151
小菜鸟在摸鱼
div内文字换行的几种情况
热门推荐
陈福国的博客
03-08 3万+
div中文字换行问题： div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行 word-break:break-all;只对英文起作用，以字母作为换行依据 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 white-space:pre-wrap; 只对中文起作用，强制换行 white-space:nowrap; 强制不换行，都起作用 white-
CSS：div中文字换行设置
Alice_Lee_Lee的博客
01-04 2538
div 中 文字换行设置
需求记录 | 如何实现div 中的文字换行(white-space)
艾米栗的代码天地
10-25 1497
如何实现div 中的文字换行(white-space)
html中如何div转换下一行,div怎么换行
weixin_30598047的博客
05-31 1万+
DIV怎么才不会自动换行？设定white-space:nowrap就可以不换行了。 但是这样div的宽度会自动增大。如果你想控制宽度的话，可以参考下面两种方式。 This is a test. This is a test.网页设计中DIV标签怎样实现内容换行网页设计中DIV标签实现内容换行，这个的话，就是通过你设置的div的宽度和高度，如果你的文字只要过多，书写超过宽度自然就会换行，也可以说是被...
div_自动换行
骑大马挎大刀
02-23 1万+
多个 子div 横向排序,超出 父div 宽度后,自动换行 <!--父div 使用display: flex;justify-items: center;flex-wrap:wrap样式--> <div style="display: flex;justify-items: center;flex-wrap:wrap"> <!--子div需要有固定的高和宽--> <div style="width:
HTML ＜div＞ 标签介绍
digitalkee的博客
07-18 1580
HTML <div> 标签 实例 文档中的一个部分会显示为绿色： <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div> 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera 所有主流浏览器都支持 <div> 标签。 定义和用法 <div&g.
实现div自动换行且可编辑的HTML技术
在Web开发中，创建一个可以编辑并且能够自动换行的`<div>`元素是一个常见的需求。用户可以在这样的`<div>`中输入文字，而文字能够根据容器宽度自动换行，且内容的增加不会导致页面其他元素变形或布局错乱。要实现...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值