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. 29.渲染器Renderer

    什么是渲染器     渲染器就是将服务器生成的数据格式转为http请求的格式   渲染器触发及参数配置 在DRF配置参数中,可用的渲染器作为一个类的列表进行定义 但与解析器不同的是,渲染器的列表是有顺 ...

  2. Istio(二)：在Kubernetes(k8s)集群上安装部署istio1.14

    目录 一.模块概览 二.系统环境 三.安装istio 3.1 使用 Istioctl 安装 3.2 使用 Istio Operator 安装 3.3 生产部署情况如何? 3.4 平台安装指南 四.Ge ...

  3. 为什么CSS中的calc函数可能会不生效？

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

  4. 河北首家城商行传统核心业务国产化，TDSQL突破三“最”为秦皇岛银行保驾护航

    11 月 1 日,秦皇岛银行新一代分布式核心系统成功投产并稳定安全运行超过三个月,标志着秦皇岛银行数字化转型应用和服务水平登上了一个新台阶. 这是秦皇岛银行有史以来规模最大.范围最广.难度最高的一次系 ...

  5. Redis 先操作数据库和先删除缓存, 一致性分析

    初始状态: 数据库和缓存中v=10 第一种,先删除缓存在操作数据库: 线程1准备更新数据库的值v=20,先删除缓存, 此时线程2进来, 缓存未命中,查询数据库v=10, 写入缓存v=10, cpu回到 ...

  6. Java线程未捕获异常处理 UncaughtExceptionHandler

    当一个线程在执行过程中抛出了异常,并且没有进行try..catch,那么这个线程就会终止运行.在Thread类中,提供了两个可以设置线程未捕获异常的全局处理器,我们可以在处理器里做一些工作,例如将异常 ...

  7. Codeforces Round #832 (Div. 2) A-D

    比赛链接 A 题解 知识点:贪心. 我们考虑把正数和负数分开放,显然把负数和正数放在一起的结果不会更优. 时间复杂度 \(O(n)\) 空间复杂度 \(O(1)\) 代码 #include <b ...

  8. pycharm系列---基本配置

    自动加入头文件 # _*_ coding: utf-8 _*_ # @Time : ${DATE} ${TIME} # @Author : xiechunhui # @Version:V 0.1 # ...

  9. OS-HACKNOS-2.1靶机之解析

    靶机名称 HACKNOS: OS-HACKNOS 靶机下载地址 https://download.vulnhub.com/hacknos/Os-hackNos-1.ova 实验环境 : kali 2. ...

  10. 【翻译】Thymeleaf – Spring Security集成模块

    原文链接:Thymeleaf - Spring Security integration modules 来源:thymeleaf/thymeleaf-extras-springsecurity自述文 ...