居然第一次遇到这种问题,还想了半天到底是怎么回事,为什么明明div设置宽度了,里面的文字超过宽度后居然不换行。

(1)word-break属性,可以让浏览器实现在任意位置换行。

    normal:使用浏览器默认的换行规则

    break-all:允许在单词内换行,效果如下:

    

    keep-all:只能在半角空格或连字符处换行

(2)word-wrap属性,允许长单词或URL地址换行到下一行。

    normal:只在允许的断字点换行(浏览器保持默认处理)

    break-word:在长单词或 URL 地址内部进行换行,效果如下:

    

DIV中文字换行显示的更多相关文章

  1. 让DIV中文字换行显示

    1. <style> div { white-space:normal; word-break:break-all; word-wrap:break-word; } </style& ...

  2. 让一个小的div在大的div中居中显示

    原文 实现原理是设置margin自动适应,然后设置定位的上下左右都为0. 就如四边均衡受力从而实现盒子的居中: 代码: .parent { width:800px; height:500px; bor ...

  3. 未知高宽的div在其父级div中垂直居中显示

    (一)如果已知子div的高宽 .father { position: relative; } .child { width: 100px; height: 80px; position: absolu ...

  4. 【CSS】【1】让DIV中的文字换行显示

    <div style="white-space:normal;word-break:break-all;word-wrap:break-word;">data</ ...

  5. 在指定的div中搜索内容,并滚动显示到当前搜索到的内容处

    我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...

  6. div中显示某个网页

    原文:div中显示某个网页 1.<iframe>方法 2.ajax方法 ajax+流实现无框架限制块刷新: 主框架index页面: js: $(function(){ $("#d ...

  7. IE8下div中2个button仅仅显示一个

    IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" &g ...

  8. 第三方文本框 在div中显示预览,让指定节点不受外部css影响

    例如,富文本框中 ol  li 但是我们往往全局样式时候会 让前面的数字不显示,但是富文本框时候,录入,我们需要显示,但是div中就不显示了 我们在预览页面中加上一个指定样式   然后后面 加上!im ...

  9. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

随机推荐

  1. 在上线项目中,用Vue写一个星级评价

    先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : ...

  2. 【安富莱二代示波器教程】第19章 附件E---参考资料

    第19章      附件E---参考资料 DSP教程 http://forum.armfly.com/forum.php?mod=viewthread&tid=3886 . FreeRTOS教 ...

  3. [Swift]LeetCode888. 公平的糖果交换 | Fair Candy Swap

    Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy that Ali ...

  4. [Swift]LeetCode947. 移除最多的同行或同列石头 | Most Stones Removed with Same Row or Column

    On a 2D plane, we place stones at some integer coordinate points.  Each coordinate point may have at ...

  5. 微信小程序请求API接口PHPSESSID变化的解决方式

    微信小程序开发,请求服务器API的方法使用的是微信官方提供的wx.request()方法.在开发中发现,每一个请求都会生成一个独立的PHPSESSID,如下图示: 搜索后得知,这是由于wx.reque ...

  6. 如何为自己的pip包打造可以执行的系统命令

    1.我们在打包我们自己的Python Package的时候.我们不仅可以在代码中使用我们的package,而且可以添加一些可执行命令来执行自己的函数. 2 .我们应该怎么办呢? 1.首先新建目录以及文 ...

  7. 用CSS实现一个抽奖转盘

    效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...

  8. vue组件的基本使用,以及组件之间的基本传值方式

    组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建:     1.全局组件:Vue ...

  9. 【Spark篇】---SparkStream初始与应用

    一.前述 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, Twitter, Zer ...

  10. MVC中的下载文件及上传

    前言:最近做的项目中用到了文件下载与上传,一下子想不起来,只能进行百度,为了方便自己做了一个小demo,特此写了这篇小笔记 1.页面方面: 2.控制器方面 namespace MvcUpload.Co ...