word-break:break-all单词截断自动换行

word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

语法:word-break : normal | break-all | keep-all

normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

word-wrap:break-word单词不截断自动换行

word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。

语法: word-wrap : normal | break-word

normal : 允许内容顶开指定的容器边界

break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

CSS强制性换行

一般情况下,元素拥有默认的

white-space:normal 自动换行

PS:不换行是white-space:nowrap

当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。

解决方法(以IE,chrome,FF为测试浏览器):

{

  word-break:break-all; /*支持IE,chrome,FF不支持*/

  word-wrap:break-word;/*支持IE,chrome,FF*/

}

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。

text-overflow省略号...样式语法结构

text-overflow语法:
text-overflow : clip | ellipsis

clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)

display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

css文本超出部分省略号&CSS强制换行总结的更多相关文章

  1. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  2. 文本超出显示省略号CSS

    单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...

  3. 关于H5 移动端css 文本超出时省略号 失效的问题

    之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...

  4. CSS文本超出用省略号代替的方法

    { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  5. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  6. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  7. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  8. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  9. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

随机推荐

  1. 【Redis】Linux下Redis的安装

    Redis服务安装 主要有两种方式:apt安装和编译安装. 我采用的是apt安装,系统是ubuntu18.04,Redis version 5:4.0.9-1 在 Ubuntu 系统安装 Redi 可 ...

  2. c++和cuda混合编程 实现传统神经网络

    直接放代码了... 实现的是x1+x2=y的预测,但梯度下降很慢...233333,gpu运行时间很快!! // // main.cpp // bp // // Created by jzc on 2 ...

  3. 《挑战30天C++入门极限》C++类对象的复制-拷贝构造函数

        C++类对象的复制-拷贝构造函数 在学习这一章内容前我们已经学习过了类的构造函数和析构函数的相关知识,对于普通类型的对象来说,他们之间的复制是很简单的,例如: int a = 10; int ...

  4. Pytest权威教程08-使用tmp目录和文件

    目录 使用tmp目录和文件 tmp_path Fixture方法 tmp_path_factory Fixture方法 tmpdir Fixture方法 tmpdir_factory Fixture方 ...

  5. C# 使用大漠插件, 源码在Github和码云 ..希望对大家有所帮助

    c# 使用大漠插件. 完成 类似 按键精灵的 功能. 方法 注释 正在慢慢的 完善中 目录 仓库 github 码云 准备 效果图 如何运行 1. 注册 大漠dll 到com (资源在 源码 DLL ...

  6. hive(2)数据类型和文件格式

    基本的数据类型 Hive支持关系型数据中大多数基本的数据类型,同时也支持关系型数据库中很少出现的三种集合数据类型. 集合数据类型 Hive中的列支持使用struct.map.array集合数据类型,下 ...

  7. 采用正则表达式实现startWith、endWith效果函数

    startsWith函数,时Java中的 在js使用时他并不是每个浏览器都有的,所以我们一般要重写一下这个函数 采用正则表达式实现startWith.endWith效果函数 String.protot ...

  8. 利用JDK方式和GuavaAPI方式实现观察者模式

    1.JDK方法实现案例需求: 去餐厅吃饭有时候需要排队,进行排队叫号.假如所有等待的人都是观察者,叫号系统就是一个被监听的主题对象.当叫号系统发出叫号通知后,所有等待的人,都会收到通知,然后检查自己的 ...

  9. JVM相关文章和GC原理算法

    参考推荐: Java内存模型及GC原理 一个优秀的Java程序员必须了解的GC机制 Android 智能指针原理(推荐) Java虚拟机规范 Java虚拟机参数 Java内存模型 Java系列教程(推 ...

  10. qt 单例程序

    1.http://qt.nokia.com的网站把QtSingleApplication 的源代码qtsingleapplication-2.6_1-opensource.zip 下载下来,然后解压缩 ...