div+css使用word-wrap设置自动折行

最新推荐文章于 2021-06-02 15:56:59 发布
最新推荐文章于 2021-06-02 15:56:59 发布
阅读量249 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdfjhc/article/details/87361909
版权
               

   div+css使用word-wrap设置自动折行

   [示例代码]

<html>
      <body>
          <div style="word-wrap: break-word;">
            12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890<img src="">
          </div>
      </body>
  </html>

[注意]

仅对IE有效

   [div+css关键词]

div css

   [div+css重要工具]

   Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&amp;displaylang=en

   [div+css的常见问题]

较验div+css格式， http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式
链接的:link,:visited,:hover,:active四种状态

   div+css使用backgroundRepeat样式设置背景图片的显示方式, http://msdn2.microsoft.com/en-us/library/ms530721.aspx

   [div+css的浏览器兼容问题]

水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记，!important需要放在前面才能起作用
手形鼠标指针，使用cursor: pointer;
padding的尺寸，在Firefox中padding是计算在width之外的，而IE6是计算在width之内的
margin的尺寸，在IE6中带有float样式的元素的margin尺寸计算有误，需要借助padding和!important标记实现兼容

   使用word-wrap设置自动折行, 仅对IE有效

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

运真表姐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html div文本自动换行,html中使用css控制div、p、td等自动换行、自动折行方法
weixin_42498003的博客
05-30 1433
自动换行、自动折行已经是个老问题，使用css控制很简单，不过如果稍不注意可能解决了一却忽略了二，所以需要个完整解决办法。需要搞定html中所有标签，比如div、p、td等。方法：这个方法支持ie、chrome、firefox等浏览器。更多一点了解：自动换行div.www_bubuko_com {word-wrap: break-word;word-break: normal;}强制不换行div.w...
div块级元素内文字换行word-wrap, word-break,white-space。
dejing9744的博客
08-29 441
word-wrap: normal; || word-break: normal; 当word-wrap或者word-break为normal时，也就是浏览器的默认设置时。 换行规则是这样的： 　　　　情景一：　　当一个单词在行尾不能完整容纳时，会自动将这个单词换到下一行，示例如下。 　　　　　　　　　　 　　　　情景二：　　当一个长长的单词在行尾不能完整容纳，并且换行后还...
CSS 自适应div 内容折行
拒绝成猿的程序员
04-12 4812
现象 如图，在一行自适应宽度的div中，原本是两个均分宽度的div,由于其中一个内部单行文本超出，造成宽度变长。 解决方法 在适应布局的div内部 使用table元素布局。不仅要对table设置 table-layout,还要有 width宽度继承父级的设置 <div> <!-- 自适应的div--> <table style="tab...
【转】你真的了解word-wrap 和 word-break 的区别吗
weixin_30871701的博客
04-15 1007
【转】你真的了解word-wrap 和 word-break 的区别吗 这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在...
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
自从CSS3引入了`word-wrap`属性，我们就有了一个更优雅的方式来解决这个问题。 `word-wrap`属性主要用于控制文本是否可以在单词内部进行换行。这个属性对于处理那些过长的单词，如URL或特定的专有名词，非常有用。...
使用word-wrap来防止文字溢出
09-25
在这些旧版本的 IE 中，`word-wrap` 需要使用其老的语法 `overflow-wrap` 或者结合 `word-break` 属性来实现类似的效果。`word-break: break-all` 可以强制在任何可能的位置进行换行，包括单词内部，但可能会导致...
css中强制换行word-break、word-wrap、white-space区别实例说明
12-13
复制代码代码如下:<div class=”c1″>safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</div><div class=c1>This is all English. This is all English. This is all English.</div><div class=c1>全是中文的...
word-break:break-all和word-wrap:break-word区别总结
12-08
例如，假设有一个宽度为200px的div，里面包含了一个英文单词"congratulation"，使用 `word-break:break-all` 后，单词会在200px处被切断，前半部分"conra"在第一行，后半部分"tulation"在第二行。这种做法对于避免...
对于div,p等块级元素css如何实现自动换行
12-13
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:...1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 复制代码代码如下: #wrap{wo
html下划线自动换行,css word-wrap自动换行样式
weixin_33816734的博客
06-02 901
一、word-wrap引见word-wrap是设置对象内文字碰到对象顶边时是否采取换行排版组织。1、语法word-wrap:normal—— 应允模式顶开指定的容器边疆，碰到一连没有空格英文或没有空格数字不换行(默认，不设置对象也具有默认格式)word-wrap:break-word—— 内容将在腹地内换行，当形式太多顶到对象鸿沟时，模式积极自愿换行。2、思空见贯情况对象内接连数字或字母太多后，...
CSS3入门
weixin_45725142的博客
09-05 295
CSS3入门 一、css概述 1、css能够使网页美观、大方，并且升级轻松、维护方便，实现结构与表现的分离。 2、css提供了丰富的样式，例如：字体属性font:属性值；颜色属性 color:属性值； 背景属性 background:属性值； 浮动属性 float:属性值；等等。 3、CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件。 注意如果是独立的文件，则必须以.css为后缀名。 css3浏览器支持情况 4、由于各浏览器厂商对css3各属性的支持程度不一样，因此在标准尚未明确的情况
自动换行
04-22 1766
原文地址：word-wrap同break-word的区别作者：我爱完美 自动换行word-break:break-all和word-wrap:break-word的区别 2007-11-26 15:15 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于： 1，word-break:b
CSS设置文本折行处理
一树的花开
04-13 2万+
一般情况 只要定好文字所在容器的宽度文字就会折行，如下面： 想控制一段文本不折行，设置如下的样式： white-space: nowrap; word-wrap: normal; word-break: keep-all; 相反，如果一段文本不能折行了，那么可能是设置了如上的样式，则将样式改为 white-space: normal; word-wrap: break-wo
div同行实现或div自动换行
C_Creator的博客
04-25 7633
float:left同行显示 使用"float:left"时，div会影响下一个div。"float:left"会让下一个div排在右边，当前div排在左边。 同行显示 <!DOCTYPE HTML> <html> <body> <div> <div style="float:left;display:inline-block,inl...
如何让多个div不换行
热门推荐
lchSAIL的博客
10-26 2万+
前几天做项目遇到一个小问题，如何让多个div不换行。现在把解决的办法记录下来（通过white-space解决的）请看下面这段代码<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div会换行</title> <style> .container{
让DIV中文字换行显示
weixin_34309543的博客
08-08 2425
1. &lt;style&gt; div { white-space:normal; word-break:break-all; word-wrap:break-word; } &lt;/style&gt; &lt;div style=" width:100px; bo...
DIV里的内容自动换行
fakerswe的博客
03-15 1万+
white-space:normal
css DIV内自动换行　超出DIV部分隐藏
最新发布
07-15
要实现在CSS的DIV元素内自动换行，并且超出DIV部分隐藏，可以使用CSS的属性来控制。可以通过设置`overflow`属性为`hidden`来隐藏超出部分，并使用`word-wrap`或`overflow-wrap`属性来实现自动换行。 以下是一个示例的CSS代码： ```css div { width: 200px; /* 设置DIV的宽度 */ height: 100px; /* 设置DIV的高度 */ overflow: hidden; /* 隐藏超出部分 */ word-wrap: break-word; /* 自动换行 */ } ``` 在上面的示例中，DIV元素的宽度被设置为200像素，高度被设置为100像素。超出部分将会被隐藏起来。使用`word-wrap`或`overflow-wrap`属性，文本内容将会在遇到边界时自动换行。 通过使用上述的CSS代码，你可以实现在DIV元素内自动换行，并且超出部分被隐藏起来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值