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

实现自动换行,用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. python截取中文字符串

    python的中文处理还是比较麻烦的,utf-8的字符串的长度是1-6个字符,一不小心就会从中截断,出现所谓的乱码.下面这个函数提供了,从一段utf-8编码的字符串中,截取固定长度的字串.ord(ch ...

  2. 初探html5---Video + DOM(视频播放)

    1:HTML5 开发环境下  lang="en" 2: <video width="320" height="240" control ...

  3. 仿QQ注册验证码的实现。

    最近发现一些网站的验证码全部换成了“极验”和“点触”的,发现QQ的注册也是与“点触”的相似.就想尝试实现一个. 先上效果图: 下面贴上主要思路及代码: 第一步:得到常用汉字列表 public stat ...

  4. 第四篇、微信小程序-icon组件

    属性: 效果图: test.wxml <!--成功图标--> <icon type="success" size="40"/> < ...

  5. Cocos2d-x中__Array容器以及实例介绍

    __Array类在Cocos2d-x 2.x时代它就是CCArray类.它是模仿Objective-C中的NSArray类而设计的,通过引用计数管理内存.__Array继承于Ref类,因此它所能容纳的 ...

  6. C# 线程--第四线程实例

    概述 在前面几节中和大家分享了线程的一些基础使用方法,本章结合之前的分享来编写一些日常开发中应用实例,和编写多线程时一些注意点.如大家有好的实例也欢迎分享.. 应用实例 应用:定时任务程序 场景:系统 ...

  7. [easyui] datebox源码阅读. 批注

    jquery.datebox.js 文件. (function($){ /** * create date box */ function createBox(target){ var state = ...

  8. ClassLoader源码

    最近找工作,面试网易和微策略,都问到了ClassLoader这个东西,看来应该是比较重要的,所以在这总结一下,嗯,类源码有点长,慢慢看吧. 翻译一下,不当之处欢迎指正. /** * A class l ...

  9. 查看Aix系统配置命令

    prtconf#topas http://baike.baidu.com/link?url=QruEnlfCqyoqQ565LicyKxIGMQYSkVesj6j9GzHWwzpDOagXtuprhT ...

  10. 终于解决了我的DISCUZ 无法连接到您的服务器,可能您的服务器处于防火墙后端 论坛云平台的问题~

    事由:由于前几天折腾备份,将论坛源文件误删了大部分,于是我重新下载了源码,传到了空间. 然后问题来了,我关闭纵横搜索提示“无法连接到您的服务器,可能您的服务器处于防火墙后端”,设置纵横搜索页一直显示“ ...