CSS文字超出宽度---换行总结
2021-5-5重新总结---CSS文字超出宽度---附代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 20px;
} .parent {
width: 100px;
} .child1 {
background-color: #a1cef5;
line-height: 30px;
padding: 20px;
} .bgc_blue {
background-color: #a1cef5;
} .bgc_purple {
background-color: #dca1f5;
} .my_usually {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .my_usually1 {
white-space: nowrap;
overflow: hidden;
} /* 强制不换行 */
.nowrap {
white-space: nowrap;
} /* 允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句 */
.breakword {
word-wrap: break-word;
} /* 断句时，不会把长单词挪到下一行，而是直接进行单词内的断句 */
.breakAll {
word-break: break-all;
} /* 超出部分显示省略号 */
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head> <body> <h1>使用样式控制字体换行下</h1>
<div class="my_usually"> </div>
<div class="parent">
<h2 class="nowrap">第1种：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;</h2>
<p class="my_usually bgc_blue">white-space: nowrap; ---overflow: hidden; text-overflow: ellipsis;</p> <h2 class="nowrap">第2种：white-space: nowrap; overflow: hidden; </h2>
<p class="my_usually1 bgc_blue">white-space: nowrap; ---overflow: hidden; </p> <h2 class="nowrap">第3种：white-space: nowrap; </h2>
<p class="nowrap bgc_purple">white-space: nowrap;----absavhsafhuafdfbjhfvsalguvfaihuivfs</p> <h2 class="nowrap">第4种：word-wrap: break-word; </h2>
<p class="breakword bgc_blue">word-wrap: break-word;----absavhsafhuafdfbjhfvsalguvfaihui</p>
<h2 class="nowrap">第5种：word-break: break-all; </h2>
<p class="breakAll bgc_purple">word-break: break-all;----absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<h2 class="nowrap">第6种：wordwrap:breakword; </h2>
<p class="normal bgc_blue">wordwrap:breakword;----absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<h2 class="nowrap">第7种：text-overflow: ellipsis; overflow: hidden; </h2>
<p class="ellipsis bgc_purple">text-overflow: ellipsis; overflow:
hidden;----absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div> <h1 class="my_h1">非使用样式控制字体换行下</h1>
<div class="parent">
<h3>汉字文字</h3>
<div class="child1">普通情况普通情况下普通情况下普通情况下普通情况下普通情况下下</div>
<h3>纯数字</h3>
<div class="child1">2222222222222222222222222222222222222222</div>
<h3>数字加文字加其他</h3>
<div class="child1">33333333333333333333普通情况3333333普通情况333333333333333333333333333333</div>
<h3>特殊符号加文字加其他</h3>
<div class="child1">————————————______普通情况3333333普通情况333333333333333333333333333333</div>
</div>
</body> </html>
多行文字自动换行居中--实测好用的很OK
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
} .outDiv .innerDiv1 {
display: inline-block;
vertical-align: middle;
} .outDiv .innerDiv-fix {
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
</style>
</head> <body>
<div class="outDiv">
<span class="innerDiv1">多行文字自动多行文字自动换行居中多行文字自动换行居中多行文字自动换行居中多行文字自动换行居中换行居中</span><span class="innerDiv-fix"><!-- 此标签不能换行 --></span>
</div>
</body> </html>
2021-5-5之前总结
以下转载自https://www.cnblogs.com/dtdxrk/
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文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- easyui combobox下拉框文字超出宽度有横向滚轮
//下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...
- css 文字超出部分显示省略号(原)
单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
- css文字超出一行用点表示
1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...
- css 文字超出省略号
white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...
- css 内容超出宽度自动换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!
- css 文字超出部分隐藏
未做隐藏处理 执行结果: 1.1行超出部分省略号 效果: 2.多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容) 效果: -webkit-line-clamp 属性定义显示行数可 ...
- css文字超出指定行数显示省略号
display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...
随机推荐
- LcdToos设置“自动播放”和“上电自动开机”的作用
"自动播放"功能,常用于屏演示或者老化功能,使能后,按开关点亮屏,PX01会自动按"画面定制"栏中进行自动顺序播放:开启方法如下: 打开相应的点屏工程,在&qu ...
- nrf52——DFU升级USB/UART升级方式详解(基于SDK开发例程)
摘要:在前面的nrf52--DFU升级OTA升级方式详解(基于SDK开发例程)一文中我测试了基于蓝牙的OTA,本文将开始基于UART和USB(USB_CDC_)进行升级测试. 整体升级流程: 整个过程 ...
- Java8新特性：函数式编程
1. 概述 函数式编程学习目的: 能够看懂公司里的代码 大数据量下处理集合效率更高 代码可读性高 消灭嵌套地狱 函数式编程思想: 面向对象思想需要关注用什么对象完成什么事情.而函数式编程思想就类似于我 ...
- iview table json数据里的num排序问题
title: 'Num', key: 'num', sortable: true, sortMethod:function(a,b,type){ //可以用Number()或者parseInt(a)转 ...
- MySQL 是怎么加行级锁的？为什么一会是 next-key 锁，一会是间隙锁，一会又是记录锁？
大家好,我是小林. 是不是很多人都对 MySQL 加行级锁的规则搞的迷迷糊糊,一会是 next-key 锁,一会是间隙锁,一会又是记录锁. 坦白说,确实还挺复杂的,但是好在我找点了点规律,也知道如何如 ...
- [排序算法] 直接/折半插入排序 (C++)
插入排序解释 插入排序很好理解,其步骤是 :先将第一个数据元素看作是一个有序序列,后面的 n-1 个数据元素看作是未排序序列.对后面未排序序列中的第一个数据元素在这个有序序列中进行从后往前扫描,找到合 ...
- Python基础之数据库：2、MySQL的下载与安装、基本使用、系统服务制作
目录 一.MySQL简介 二.安装与下载 1.下载流程 2.配置环境变量 三.主要目录介绍 四.基本使用 五.系统服务的制作 六.密码相关 1.修改管理员密码 2.忘记密码 一.MySQL简介 M ...
- MySQL进阶实战5，为什么查询速度会慢
一.先了解一下MySQL查询的执行过程 MySQL在查询时,它是由很多子任务组成的,每个子任务都会消耗一定的时间,如果要想优化查询,实际上要优化其子任务,可以消除一些子任务.减少子任务的执行次数.让子 ...
- 4.5：HDFS操作实验
〇.概述 1.拓扑结构 2.目标 进行HDFS的实验,了解HDFS的基本操作. 一.常用操作 1.启动 50070 2.查看及创建 3.上传文件
- Selenium4+Python3系列（十一） - Page Factory设计模式
写在前面: Page Object模式,目的是将元素定位和元素操作分层,只接触测试内容,不写基础内容,便于后续对自动化测试用例体系的维护,这是中心思想,也是核心. 那么我们继续将简洁延续,这里沿用Ja ...