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文字超出宽度---换行总结的更多相关文章

  1. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  2. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  3. easyui combobox下拉框文字超出宽度有横向滚轮

    //下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...

  4. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  5. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  6. css文字超出一行用点表示

    1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...

  7. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  8. css 内容超出宽度自动换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!

  9. css 文字超出部分隐藏

    未做隐藏处理 执行结果: 1.1行超出部分省略号 效果: 2.多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容) 效果: -webkit-line-clamp 属性定义显示行数可 ...

  10. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

随机推荐

  1. 2流高手速成记（之八）：基于Sentinel实现微服务体系下的限流与熔断

    我们接上回 上一篇中,我们进行了简要的微服务实现,也体会到了SpringCloudAlibaba的强大和神奇之处 我们仅改动了两个注释,其他全篇代码不变,原来的独立服务就被我们分为了provider和 ...

  2. 【安装文档】TRex流量分析仪保姆级安装指南--基于VMware虚拟机（ubantu18.04@Intel 82545EM）

    前言 既然你已经知道TRex并尝试搜索它的安装教程,这意味着你有一定的基础知识(至少知道自己需要什么).因此本文对于TRex的介绍部分会偏少 本次主要为TRex安装过程的一次记录(版本为v3.0.0) ...

  3. 【NGINX】浅尝

    Introduction Nginx is a web server that can also be used as a reverse proxy, load balancer, mail pro ...

  4. Day10：for循环结构的使用详解

    for循环 将0~100内的奇.偶数分别求和 思路 第一步先将0~100以内的奇.偶数分成两队,第二步使奇数累加.ou'shu public class ForCirculate{ public st ...

  5. 【深入浅出 Yarn 架构与实现】3-1 Yarn Application 流程与编写方法

    本篇学习 Yarn Application 编写方法,将带你更清楚的了解一个任务是如何提交到 Yarn ,在运行中的交互和任务停止的过程.通过了解整个任务的运行流程,帮你更好的理解 Yarn 运作方式 ...

  6. C++两种方法改变输出颜色

    方法一: 使用 SetConsoleTextAttribute    需要引入 #include "windows.h"    SetConsoleTextAttribute(Ge ...

  7. PP视频(PPTV聚力)web接口分析

    前言 前几天我想看一个番剧, 正好搜索到了 PP视频,我才知道PP视频就是PPTV聚力,我想把番剧下载下来,结果发现视频竟然不是m3u8格式,而是多段mp4,所以简单的写了个脚本,可以在不登录的情况下 ...

  8. 数电第三周周结_by_yc

    主要内容:Modelsim和Quartus的使用坑点 Modelsim: 新建Project:   在每新建一个verilog文件时,均需要添加一project的独立路径,否则不同文件之间会相互影响! ...

  9. 干货 ｜ 如何快速实现 BitSail Connector？

    简介 本文面向 BitSail 的 Connector 开发人员,通过开发者的角度全面的阐述开发一个完整 Connector 的全流程,快速上手 Connector 开发. 目录结构 首先开发者需要通 ...

  10. async.js 版本兼容问题 async.filter举例

    async3.x 和async2.6.1 版本下 const files = ['dir1/file1.txt','dir2/file3.txt','dir3/file6.txt']; // Usin ...