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

实现自动换行,用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. BZOJ 2962

    2962: 序列操作 Time Limit: 50 Sec  Memory Limit: 256 MBSubmit: 618  Solved: 225[Submit][Status][Discuss] ...

  2. CentOS安装Node.js简单教程

    记录一下自己安装过程 先安装gcc-c++编译环境和openssl  代码如下 复制代码 yum install gcc-c++ openssl-devel wget http://nodejs.or ...

  3. VS2012生成不依赖运行时不依赖MFC的MFC程序

    转载请注明来源:http://www.cnblogs.com/xuesongshu/ 1.新建MFC或者Win32工程,全部使用默认设置 2.设置工程属性,展开配置属性,转到:常规~MFC的使用,修改 ...

  4. Contoso 大学 - 7 – 处理并发

    原文 Contoso 大学 - 7 – 处理并发 By Tom Dykstra, Tom Dykstra is a Senior Programming Writer on Microsoft's W ...

  5. OC3_歌词解析

    // // LrcManager.h // OC3_歌词解析 // // Created by zhangxueming on 15/6/15. // Copyright (c) 2015年 zhan ...

  6. Android知识思维导图

    注:图片来源于网络,谢谢分享. 一.  项目目录结构: 布局控件 ListVIew控件 Widget:(窗口小部件) Activity Manager 二.  应用程序的5个模块构成: Activit ...

  7. java运算符新用法和^新认识

    public class Demo1 { public static void main(String[] args) { boolean t = false | true; System.out.p ...

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

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

  9. Unity编程回忆录之控制物体移动

    最新心血来潮,然后开始学习Unity3D游戏开发引擎,对于一个主流的跨平台3D游戏开发引擎,我已经深深的为他着迷了,于是果断的开始学习这个引擎,而且刚刚预装的游戏引擎最新版中4.3版本已经开始原生支持 ...

  10. Eclipse必须掌握的快捷键

    Eclipse快捷键 Ctrl +  / 添加//注释.删除//注释 Ctrl + 1 快速修复错误 Ctrl + Shift + f 格式化文档 Shift + Enter Shift + Ctrl ...