在很多时候,为了防止内容过长把表格或容器撑破, 我们都需要为容器加上自动换行的功能。

实现自动换行,用CSS来实现,通常有两种方式:

  • word-break:

取值为 normal, break-all, keep-all

  • word-wrap:

取值为 normal, break-word

word-break: break-all 太霸道,无条件折行,会造成 英文单词 和 数字的断行,不建议使用。

推荐使用的是:

首先新建html文件,将下面的代码考入:

{word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;}

对 FF3 应该是兼容的。

来自:http://goodboy5264.blog.163.com/blog/static/253829820091110305144/

过长文字自动换行的技巧 Word-Break Word-Wrap的更多相关文章

  1. LeetCode ||& Word Break && Word Break II(转)——动态规划

    一. Given a string s and a dictionary of words dict, determine if s can be segmented into a space-sep ...

  2. 17. Word Break && Word Break II

    Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...

  3. LeetCode之“动态规划”:Word Break && Word Break II

     1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...

  4. leetcode@ [139/140] Word Break & Word Break II

    https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine ...

  5. canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  6. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

  7. [Leetcode Week9]Word Break II

    Word Break II 题解 题目来源:https://leetcode.com/problems/word-break-ii/description/ Description Given a n ...

  8. 【Word Break II】cpp

    题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where e ...

  9. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

随机推荐

  1. git 一个文件还原到某个提交的commit

    git checkout ${commit} /path/to/file 参考文献中1的参考链接中的git-checkout(1) Manual Page 中的Name: git-checkout - ...

  2. 1172 Hankson 的趣味题

    1172 Hankson 的趣味题 2009年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Descrip ...

  3. Windows 7 IE11 F12 不能正常使用

    打开任意网站,按下F12,或者右键鼠标,按L键.出现上面的图的情况!解决办法如下:需要安装下面的补丁(KB3008923) 32位系统:http://www.microsoft.com/en-us/d ...

  4. Sublime Text—安装

    一.简介 市面上的编辑器纷繁复杂各有优点,好用的编辑器能让你工作事半功倍,先简单介绍下本文主角Sublime Text编辑器,下面简称Sublime. 1.可用于 Windows.Mac OS X 和 ...

  5. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  6. MySqlDataReader在Using中使用

    结论:当DataReader放在Using方法中时,会自动释放资源,如果中途出现了异常处理,也同样会释放掉占用的资源.测试过程:这里由于没有将全部分过程记录下来,只是对结果大体的说明一下,有兴趣的童鞋 ...

  7. Chrome 控制台不完全指南【转载】

    Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「 ...

  8. Smarty控制foreach输出数量

    最近在搞ecshop,ecshop用的是smarty.在首页中想要修改展示的商品数量,但是用的是foreach,让我无从下手,在网上找了好久终于找到解决方案. <!--{foreach name ...

  9. NodeJS V8 GC概览

    [A tour of V8: Garbage Collection] http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection 基本是 ...

  10. eclipse中英文切换--四种方式

    若转载,请注明出处 http://www.cnblogs.com/last_hunter/p/5627009.html 谢谢! ------------------------------------ ...