下面以table中td的内容超出为例说明:

首先:

td {

  display: block;

  }

然后:给td设置css样式:

1.  td {

  word-wrap: break-word;

  }

2. td {

  overflow-wrap: break-word;

  }

以上两种样式都可以

一、设置之前

td中的内容超出边框

二、设置之后

三、总结

两种写法的效果是相同的,略有不同在于:

因为word-wrap这个属性最初是由微软发明的,所以,所有的浏览器都支持这个属性。

尽管有所有的浏览器都支持,但W3C决定要用overflow-wrap替换word-wrap,我想可能是他们认为word-wrap用词不当。overflow-wrapword-wrap具有相同的属性值,但现在,word-wrap被当作overflow-wrap的备选写法。

虽然已经有不少的浏览器支持overflow-wrap这种写法,但看起来没必要使用overflow-wrap来让老的浏览器不支持。所有的浏览器都会继续支持word-wrap这种写法。

div中内容超出自动换行的更多相关文章

  1. div中内容无法自动换行问题

    .l-text{ padding:.3em .5em; width:67%; height: auto; /*height:1.3em;*/ border:.1em #2294C3 solid; bo ...

  2. CSS 之 div中文字超出时自动换行

          在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...

  3. css div中内容绝对居中(多行内容)

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

  4. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  5. 设置div中文字超出时自动换行

    一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...

  6. div中p标签自动换行

    只需要设置div的width属性,p标签加上word-break:break-word属性就会自动换行 ----------------2016.7.1-------------------- 今天在 ...

  7. 清除div中内容

    $.ajax({            url: "SearchSN.aspx",            data: "SN=" + $("#txtS ...

  8. <td>内容超出自动换行

    td 内容自动换行 table表格td设置宽度后文字太多自动换行 设置table 的 style="table-layout:fixed;" 然后设置td的 style=" ...

  9. css中hover设置边框后div中内容后移解决方法

    <style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...

随机推荐

  1. Git学习笔记3 git revert

    我们难免会因为种种原因执行一些错误的commit / push,git提供了revert命令帮助程序员修复这样的错误. 举个例子,下图是git commit 的历史记录 git revert 命令会通 ...

  2. URAL题解二

    URAL题解二 URAL 1082 题目描述:输出程序的输入数据,使得程序输出"Beutiful Vasilisa" solution 一开始只看程序的核心部分,发现是求快排的比较 ...

  3. ASP.NET中的状态保持

    1.ASP.NET中的状态保持解决方案 2.常用的状态报保持方式 view state  ASP.Net的.aspx页面特有,页面级的,就是在页面上的一个隐藏域中保存客户端单独使用的数据的一种方式(b ...

  4. php7.33 configure

    To assign environment variables (e.g., CC, CFLAGS...), specify them as VAR=VALUE. See below for desc ...

  5. Guava cache功能简介(转)

    原文链接:http://ifeve.com/google-guava-cachesexplained/ 范例 LoadingCache<Key, Graph> graphs = Cache ...

  6. 初探Nginx架构

    参考链接:http://tengine.taobao.org/book/chapter_02.html nginx在启动后,在unix系统中会以daemon的方式在后台运行,后台进程包含一个maste ...

  7. BootStarp的form表单的基本写法

    代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...

  8. request机制

    每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互 基于HTML + Flask 写一 ...

  9. csu 1503: 点到圆弧的距离

    1503: 点到圆弧的距离 Time Limit: 1 Sec  Memory Limit: 128 MB  Special JudgeSubmit: 614  Solved: 101[Submit] ...

  10. css3 box-sizing属性值详解

    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...