精华内容
下载资源
问答
  • CSS文本换行
    千次阅读
    2021-07-08 16:24:31

    文本过长时溢出不换行显示

    1.文本过长时换行显

    span {
    	width: 100px
    	word-break: break-all;
    	overflow: auto;
    	white-space: normal;
    }
    

    2.单行文本溢出省略

    span {
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }
    
    更多相关内容
  • CSS文本换行

    千次阅读 2021-08-11 21:27:54
    CSS文本换行处理 一、文本基本属性 white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit; 规定段落中的文本如何换行 normal:默认。空白会被浏览器忽略。 pre:空白会被浏览器保留。其行为方式...

    CSS文本换行处理

    一、文本基本属性

    1. white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit; 规定段落中的文本如何换行
      1. normal:默认。空白会被浏览器忽略。
      2. pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。
      3. nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。
      4. Pre-wrap::保留空白符序列,但是正常地进行换行。
      5. Pre-line:合并空白符序列,但是保留换行符。
      6. inherit:继承父盒属性;
    2. word-wrap:normal | break-word;属性允许长单词或 URL 地址换行到下一行。
      1. normal:只在允许的断字点换行(浏览器保持默认处理)。
      2. break-word:在长单词或 URL 地址内部进行换行。
    3. word-break:normal | break-all | keep-all; 属性规定自动换行的处理方法,可以让浏览器实现在任意位置的换行。
      1. normal:使用浏览器默认的换行规则。
      2. break-all:允许在单词内换行。
      3. keep-all:只能在半角空格或连字符处换行。
    4. word-spacing:normal | length; 属性增加或减少单词间的空白(即字间隔)。length:长度单位;可以为0或负值
    5. text-overflow:clip | ellipsis; 属性规定当文本溢出包含元素时发生的事情。
      1. clip:超出宽度 修剪文本。
      2. ellipsis:显示省略符号来代表被修剪的文本。
    6. writing-mode :horizontal-tb | vertical-rl | vertical-lr;属性规定文本行水平还是垂直地排布。
      1. horizontal-tb:让内容从左到右水平流动,从上到下垂直流动。
      2. vertical-rl:让内容从上到下垂直流动,从右到左水平流动。
      3. vertical-lr:让内容从上到下垂直流动,从左到右水平流动。

    二、数字、英文和特殊符号无法换行问题

    ​ 当给div盒子设置固定宽度时,当字符是汉字时会在盒子宽度出自动这行。但是如果字符是英文、数字、特殊符号时效果却不是我们想要的结果。这是因为浏览器在解析页面的时候,把这一串字符当成一个单词了,这样就不会自动切断字符串而进行换行。 相信当我们了解上面的属性之后就知道如何处理这个问题;

    .text {
    	width: 200px;
        height: 200px;
        background-color: aqua;
        /* 允许在单词内换行。如果到一行末尾长单词没有结束会截断单词 拼接在下一行 */
        word-break: break-all;
        /* 在长单词或 URL 地址内部进行换行。 在一行末尾处遇到长单词会自动换行去下一行展示 */
        word-wrap: break-word;
    }
    

    三、解决文本溢出隐藏问题;

    ​ 平常遇到这样的业务逻辑,当文字描述一行放不下时也不希望折行显示,只想展示省略号代表内容未完。想要实现这个效果,有几种实现方案;

    1. 利用上面了解的属性几行代码轻松搞定:

      .text {
      	width: 200px;
          height: 200px;
          background-color: aqua;
          /* 强制文本不换行 */
        	white-space: nowrap;
        	/* 溢出隐藏 */
        	overflow: hidden;
        	/* 溢出部分省略号 */ 
        	text-overflow: ellipsis;
      }
      
    2. text-overflow是css3新增属性,有些低版本的浏览器不支持就需要使用伪元素模拟省略号;

      .text {
      	position: relative;
      	width: 200px;
          height: 200px;
          background-color: aqua;
          /* 强制文本不换行 */
        	white-space: nowrap;
        	/* 溢出隐藏 */
        	overflow: hidden;
        	padding-right: 30px;
      }
      .text::after {
      		content: '...';
      		display: block;
      		position: absolute;
      		top: 2px;
      		right: 0px;
      		width: 30px;
      		height: 30px;
      		background: aqua;
      }
      
    展开全文
  • 深入研究 CSS 文本换行

    千次阅读 2022-05-19 01:12:48
    欢迎和号主【前端点线面】进群盘...今天来研究一下 CSS 中的文本换行。正常情况下,在固定宽度的盒子中的中文会自动换行。但是,当遇到非常长的英文单词或者很长的URL时,文本可能就不会自动换行,而会溢出所在容器...

    欢迎和号主【前端点线面】进群盘算法,此外本号干货满满:14个门类(100+篇原创)内容(又干又硬)《前端百题斩》pdf(助力薪资double)20+篇思维导图(知识系统化、记忆简单化),进摸鱼群

    今天来研究一下 CSS 中的文本换行。正常情况下,在固定宽度的盒子中的中文会自动换行。但是,当遇到非常长的英文单词或者很长的URL时,文本可能就不会自动换行,而会溢出所在容器。幸运的是,CSS 为我们提供了一些和文本换行相关的属性;

    • overflow-wrap

    • word-break

    • white-space

    • line-break

    • hyphens

    1. overflow-wrap

    overflow-wrap 用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。其属性值有以下三种:

    overflow-wrap: normal;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;

    (1)normal

    属性值为 normal 将使浏览器使用系统的默认换行行为。因此,对于英语和其他相关书写系统,换行符将出现在空格和连字符处。

    19442d8e33517c25a05b1354e78ad289.png

    从图中可以看出,段落中有一个很长的单词溢出了容器,这是系统的默认换行行为。

    (2)anywhere

    使用值 anywhere 将在字符串之间的任意点来进行中断,仅当在其行上显示单词会导致溢出时,浏览器才会中断该单词。如果单词放在其行上时仍然溢出,它将在发生溢出的点处中断该单词。

    bbfedca070807a6cfad57bb9b3490bf3.png

    可以看到,使用 overflow-wrap:anywhere 将溢出的单词分解成文本块,这样就可以将其放入容器中。这里文本所在的容器宽度是固定的。

    该属性会影响其所在元素的 min-content 属性大小计算。当width设置为min-content时很容易看出来:

    .break-word {
      width: min-content;
      overflow-wrap: break-word;
    }
    
    .anywhere {
      width: min-content;
      overflow-wrap: anywhere;
    }

    效果如下:

    1c73405943b1fe4c096b2a96f735d7e8.png

    可以看到,带有overflow-wrap:break-word 的元素计算出的 min-content 就像单词没有被破坏一样,因此它的宽度变成了最长单词的宽度。而带有 overflow-wrap:anywhere 的元素,由于在任何地方都可能发生中断,因此 min-content 最终成为单个字符的宽度。

    注意,这种行为只有为文本所在容器的宽度设置为min-content时才会发挥作用,如果宽度设置为固定的值,那么anywherebreak-word 的表现是一致的。

    另外需要注意,目前有些浏览器不支持该属性:

    abcd9ea1b224fb68935347ca9574cc38.png

    (3)break-word

    break-word 属性表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

    a1340313be51ee575b9157f94e20cac5.png

    可以看到,文本在长单词的某个地方自动换行了。如果文本所在容器设置了固定的宽度,就会在长单词溢出的地方换行。

    (4)浏览器兼容性

    overflow-wrap 属性就是原来的word-wrapword-wrap最初是一个没有前缀的Microsoft扩展。它不是CSS标准的一部分,尽管大多数浏览器都使用word-wrap这个名称来实现它。根据CSS3规范草案,浏览器应将word-wrap视为overflow-wrap属性的遗留名称别名,以确保兼容性。

    03eb12722ce7018f20a39db45a4abdd8.png

    2. word-break

    word-break 属性用于指定怎样在单词内进行断行。我们可以使用该属性在内容发生溢出的确切位置拆分单词并将其换行到下一行。下面是 word-break的属性值:

    word-break: normal;
    word-break: break-all;
    word-break: keep-all;
    word-break: break-word;

    需要注意,break-word 属性值已经被弃用,但是由于遗留原因,浏览器仍然支持它。指定该属性与同时使用word-break: normaloverflow-wrap: anywhere  的效果是一样的。

    下面就来看看前三个属性:

    (1)normal

    word-break 属性的值设置为 normal 将应用默认的断行规则:

    8ffb5eaba7db28cc31b7c2242e9451c7.png

    可以看到,设置为 normal 时,和不设置word-break时的效果是一样的,这就是浏览器默认的断行行为。

    (2)break-all

    当属性值为 break-all 时,对于 non-CJK (CJK 指中文/日文/韩文) 的文本,可在任意字符间断行。

    619a98d1f72f7c4cb9c0c67446f6813b.png

    可以看到,长单词在溢出的位置将剩余的文本进行了换行。使用 break-all 将在英语和其他相关语言系统中发生溢出的确切位置在两个字符之间断开一个单词。但是,它不会对中文、日文和韩文文本应用相同的行为。因为 CJK 书写系统有自己的应用断点规则。

    (3)keep-all

    如果使用值 keep-all,即使内容溢出,浏览器也不会将分词应用于 CJK 文本。应用 keep-all 值的效果与非 CJK 书写系统的正常效果相同。简单来说就是,像英语这种 CJK 文本不会断行,像中文这种 Non-CJK 文本表现同 normal

    680079ab751a299caf70e54935ba9aea.png

    (4)浏览器兼容性

    3d0af8440e9391f27ffc70b862c47a18.png

    3. white-space

    white-space 属性是用来设置如何处理元素中的空白。其属性值如下:

    white-space: normal;
    white-space: nowrap;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line

    下面来看看这些属性值都有哪些作用。

    (1)nowrap

    当我们将white-space的值设置为 nowrap 时,可以防止文本自动换行

    909abe64308ba1e5903ce27d5d93c60d.png

    可以看到,这里文本并没有换行,这时文本会在同一行上继续,直到遇到 <br> 标签为止。

    (2)pre

    当我们将white-space的值设置为pre时,文本之间的空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

    <!-- 这个HTML的格式会导致额外的空白 -->
    <p>
      What's worse, ignorance or apathy?
      I don't know and I don't care.
    </p>
    
    
    <p>What's worse, ignorance or apathy?
      I don't know and I don't care.</p>
    
    
    <pre>What's worse, ignorance or apathy?
    I don't know and I don't care.</pre>

    样式设置如下:

    p {
      white-space: pre;
    }
    
    pre {
      /* <pre> 会设置 font-family: monospace, 这里将其重置 */
      font-family: inherit;
    }

    显示效果如下:

    748c64c661257297cf0a33225cfc4e2a.png

    (3)浏览器兼容性

    3c43b579df96c84d38e350fb18862833.png

    4. line-break

    line-break属性可以用来处理如何断开带有标点符号的中文、日文或韩文文本的行。简而言之,该属性可以用来处理过长的标点符号。

    (1)anywhere

    可以使用 line-break: anywhere 来使长标点符号进行换行:

    1aa4c99b6716bc4785dcd0206f414c75.png

    可以看到,overflow-wrap: break-wordline-break:anywhere 能够保持内容被包含在容器内,但是 word-break: break-all 在有长标点符号时就会发生溢出。

    (2)浏览器兼容性

    ef1e15e871d590f8befa08ac34cbe300.png

    5. hyphens

    hyphens 属性告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。其断字规则由语言决定,因此需要告诉浏览器使用哪种语言。这是通过在 HTML 中指定lang属性来完成的:

    <p lang="en">This is just a bit of arbitrary text to show hyphenation in action.</p>

    (1)auto

    hyphens 设置为 auto 时,浏览器可以自由地在适当的断字点自动断词:

    p {
      -webkit-hyphens: auto; / * 用于 Safari */
      hyphens: auto;
    }

    显示效果如下:

    e72a695387328bc944076537fbade7a3.png

    (2)浏览器兼容性

    df0611e1d40aad9bcdf7c057d8558106.png

    6. 总结

    • 当文本所在容器的宽度固定时,可以使用 overflow-wrap: break-word;overflow-wrap: anywhere; 来实现文本的自动换行;如果容器宽度为 min-content,就只能使用 overflow-wrap: break-word; 实现文本换行;overflow-wrap: break-word;也可以用于长标点符号的换行。

    • word-break: break-all; 可以用于文本换行,但是该属性不能使长标点符号换行;

    • white-space: nowrap; 可以用于防止文本自动换行;

    • line-break: anywhere 可以用于将长标点符号进行换行;

    • hyphens: auto; 可以用于使用连字符连接单词。

    参考:

    https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/

    https://blog.logrocket.com/guide-word-wrap-overflow-wrap-word-break-css/

    ··············· 执鸢者简介 ·················

    看号主详细信息,来这

    瞅一瞅

    669edd708614874a14b156637d184693.png

    畅所欲言交流

    【1】前端百题斩系列

    【2】Vue系列

    【3】React系列

    【4】前端基础系列

    【5】基础知识

    【6】浏览器系列

    【7】构建工具系列

    【8】网络系列

    【9】Node系列

    【10】源码系列

    【11】前端有意思

    【12】手撕算法系列

    【13】个人总结

    【14】杂科

    展开全文
  • css 文本换行问题

    2020-05-29 14:04:58
    nowrap 文本不会换行文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-...
    文本 <br>  或者 \n
    
    white-space:
    normal	默认。空白会被浏览器忽略。
    pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap	文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap	保留空白符序列,但是正常地进行换行。
    pre-line	合并空白符序列,但是保留换行符。
    inherit	规定应该从父元素继承 white-space 属性的值。
    
    
    word-break:
    normal	使用浏览器默认的换行规则。
    break-all	允许在单词内换行。------------------------------------  word-break: break-all
    keep-all	只能在半角空格或连字符处换行。
    
    word-wrap:
    normal	只在允许的断字点换行(浏览器保持默认处理)。
    break-word	在长单词或 URL 地址内部进行换行。
    

    参考:https://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.html
    实例:https://codepen.io/YGYOOO/pen/jvyrWK

    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* white-space、word-break、word-wrap */
            /* white-space: nowrap; 简单的,我们可以理解为永不换行。 */
            /* .content {
                width: 100px;
                height: 100px;
                white-space: nowrap;
                border: 1px solid #000;
            } */
            /* white-space:pre; 空格和换行符全都被保留了下来!不过自动换行还是没了(其实没什么大用 代码会压缩) */
            /* .content {
                width: 100px;
                height: 100px;
                white-space:pre;
                border: 1px solid #000;
            } */
            /*white-space:pre-wrap; 空格被合并了,但是换行符可以发挥作用 */
            .content {
                width: 100px;
                height: 100px;
                white-space: pre-wrap;
                border: 1px solid #000;
            }
    
            /* white-space:pre-line 空格被合并了,但是换行符可以发挥作用 */
            .content {
                width: 100px;
                height: 100px;
                white-space: pre-line;
                border: 1px solid #000;
            }
    
            /* normal	使用浏览器默认的换行规则。
            break-all	允许在单词内换行。
             keep-all	只能在半角空格或连字符处换行。 */
            .content {
                width: 100px;
                height: 100px;
                word-break: keep-all;
                border: 1px solid #000;
            }
    
            /* word-wrap 部分浏览器 */
            /* normal 只在允许的断字点换行(浏览器保持默认处理)。 
            break-word 在长单词或 URL 地址内部进行换行。 */
             .content {
                width: 100px;
                height: 100px;
                word-break: keep-all;
                border: 1px solid #000;
            }
        </style>
    </head>
    
    
    <body>
        <div class="content">
            Hi&nbsp;&nbsp;,
            This is a incomprehensibilities long word.
            </br>
            你好&nbsp;&nbsp;,
            这 是一个不可思议的长单词
        </div>
    </body>
    
    </html>
    
    展开全文
  • css文本换行加省略号

    千次阅读 2019-07-06 10:36:57
    display: -webkit-box; /*控制显示行数*/ -webkit-line-clamp: 2; /* 可以显示的行数,超出部分用...表示*/ -webkit-box-orient: vertical; overflow: hidden;
  • CSS3出现的时候,我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。 一、word-wrap的语法 1、语法 复制代码代码如下: word-wrap : normal || break-...
  • css文本换行并多行之后省略。
  • CSS文本换行详解

    千次阅读 2021-08-04 04:27:53
    还记不记得昨天发表的《table表格那点事儿》最后的一个问题不?先撇开问题,我们从头说起。在网页排版中,有些时候是需要文本自动换行的,对于...其它我是直接把汉字(CSS文本换行详解---艺灵设计)放百度里面翻译的,...
  • 今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...
  • 1 强制换行 word-wrap: break-word; 2 单行文本溢出时显示为省略号 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; +width,height根据需要设定 3 多行文本溢出时显示为省略号 (仅...
  • 1. 使用word-wrap:break-word 不生效的情况: 1. 对行元素不生效;...2. 下面是,平时用到的一些, 文字处理css: 文本多出隐藏(从第二行开始) overflow: hidden; display: -webkit-box; -webkit-box-orient:vert
  • CSS文本换行

    2021-06-13 15:08:41
    在网页设计中,我们常常会发现文本在容器中的换行和我们理想的不一样,这导致不对齐溢出等不美观现象。那么我们怎么来控制长文本换行呢?用CSS即可完成。一、DIV、P等块级元素的换行控制1、当我们定义一个区块的...
  • CSS 文本换行控制

    2020-03-20 11:41:41
    pre-wrap: 上图对比可以发现,空白符的效果依旧存在,并且换行符的结果也得以保留,同时保留了自动换行的效果, pre-line 通过上图我们可以发现,空格被合并了,但是换行符效果保留,并且自动换行效果也在 word-break 在...
  • CSS 文本换行

    2012-10-22 14:43:00
    文本换行的一些样式属性: 1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. ...
  • text-align: justify; text-justify: newspaper; word-break: break-all; 需要在div上限制宽度
  • 正常文本的显示p{width: 300px;box-shadow: 0 0 10px #ccc;padding: 0 20px;margin: 20px 100px;}手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没...
  • css中关于文本换行的处理总结

    万次阅读 2022-02-08 15:19:12
    文本不会换行文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素...
  • css文本换行的问题

    2019-10-07 11:09:30
    今天敲代码的时候发现了一个一直都没太注意的小问题,当我在一个200px的div中写了一长串的‘f ‘时发现没有换行 但加上空格或标点符号后就能自动换行 原来浏览器把它当成了一串完整的单词,所以默认不换行,...
  • CSS系列之文本换行

    2022-09-03 13:27:46
    CSS属性word-break指定了怎样在单词内断行。CSS 属性是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行
  • 可以看到CJK文本会自动行,非CJK文本不会自动换行,会超出容器,但是在查找到空格这类可以作为换行依据的内容时,非CJK内容也能实现换行 break-all:break-all属性很霸道,只要容器装不下了,就会立即换行,不管是...
  • CSS文本强制换行

    千次阅读 2022-03-21 15:54:04
    在没有空格的(字母、数字,符号),超过容器宽度时就会把容器撑大,不换行。所以在这里需要对其设置强制换行的样式; 解决方案: /* word-wrap: break-word; */ /* word-break: break-all; */ 区别: word...
  • 前言: css很强大。 无论是早期的div+span...css3也加强了文本处理能力。今天结合两个小需求来谈谈css文本处理 文本属性指决定文本特性的属性:文本对齐方式、文本的行高、文本的从左到右还是从右到左、字...
  • css文本多行换行两端对齐,且最后一行左对齐 text-align: justify!important; text-align-last: left!important;
  • 1.white-space:normal; 这个只针对中文有效 2.word-break:break-all; 强制换行,针对中文,数字,英文等都有效; 3.word-wrap:break-word; 英文单词碰到换行的时候,整个单词换行
  • css 文字换行的样式

    2022-03-17 17:28:37
  • CSS 文本换行简易笔记

    2020-12-05 22:49:25
    //文本不会换行文本会在在同一行上继续,直到遇到<br>标签为止。 text-overflow:ellipsis;//文字溢出化为省略号 } 多行(仅限webkit内核) p{ overflow:hidden;//溢出隐藏 text-overflow:ellipsis;//文字...
  • 摘要:下文讲述css如何对文本进行换行的方法分享,如下所示;实现思路:使用以下css属性,即可对文本进行换行操作word-break:break-all;/* 单词内换行 */word-wrap:break-word... /* 不换行 */例:css文本换行示例说明...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,988
精华内容 27,595
关键字:

CSS文本换行