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

实现自动换行,用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. 每天一道LeetCode--206. Reverse Linked List

    Reverse a singly linked list. package cn.magicdu; import cn.magicdu.extra.ListNode; public class _20 ...

  2. 深入理解Java虚拟机博客参考目录

    参考博客:注明请注明出处 深入理解Java虚拟机读书笔记之:第5章 Java虚拟机(Java虚拟机内部结构图,很重要) 深入理解Java虚拟机读书笔记之:第6章 Java class文件: <深 ...

  3. 【转】fread函数和fwrite函数

    1.函数功能   用来读写一个数据块. 2.一般调用形式   fread(buffer,size,count,fp);   fwrite(buffer,size,count,fp); 3.说明   ( ...

  4. jQuery动态添加元素并绑定事件

    写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 ...

  5. poj 3616 Milking Time

                                                                                                 Milking ...

  6. C++与Lua交互(五)

    引言 要将C++中的对象类型映射到Lua中,就不得不要先了解Lua面向对象的机制.在这里,我们先看一下Lua面向对象的实现基础--metatable,再以此实现C++对象到Lua的映射. Lua面向对 ...

  7. poj 1077 Eight(A*)

    经典的八数码问题,用来练习各种搜索=_=.这题我用的A*做的,A*的主要思想就是在广搜的时候加了一个估价函数,用来评估此状态距离最终状态的大概距离.这样就可以省下很多状态不用搜索.对于每个状态设置一个 ...

  8. [java学习笔记]java语言核心----面向对象之this关键字

    一.this关键字 体现:当成员变量和函数的局部变量重名时,可以使用this关键字来区别:在构造函数中调用其它构造函数 原理:         代表的是当前对象.         this就是所在函数 ...

  9. putty 实现不用输入用户名密码直接登陆

    多谢谢Eric的教程 ,下面是我的简化版,原版为Eric所写 远程登陆Linux服务器有两大著名软件,一个是商业软件securecrt,一个是开源软件putty. 两者的安全性能都很高,发展了多年,值 ...

  10. vs2013编译qt程序后中文出现乱码

    我的vs是2013版的,qt是5.4.2,在使用vc将程序编译好后并运行时在界面上输出的中文出现了乱码,在网上找了很长时间终于找到了解决方法: QString str = QStringLiteral ...