文字超出换行的处理方法

QOFJI • 2025-02-24 00:33 • 编程

一、CSS文字超出换行

CSS控制文本的溢出，主要有以下几种方式：

1. text-overflow属性

    
        .txt{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* 显示省略号 */
        }

以上代码和CSS，当文字超出200px宽度时，超出部分用省略号表示。如果不需要省略号，可以使用text-overflow: clip; 来实现。

2. word-break属性

    
        .txt{
            width: 300px;
            word-break: break-all; /* 字符会跨行断开，不考虑单词 */
        }

以上代码和CSS，当文字超过300px宽度时，让文字在字符处断开，而不是在单词的中间断开。

3. white-space属性

    
        .txt{
            white-space: pre-wrap; /* 自动换行，保留连续空格和换行符 */
        }

以上代码和CSS，当文本太长时，自动折行。但保留连续空格和换行符，
等同于在HTML代码中用 “

” 标签，保留换行符和空格。

二、CSS图片超出换行

当图片尺寸过大，超出了父级元素的宽度时，图片会响应式缩小，但是图片的长宽比会被改变，导致变形。
因此使用以下方法，将大图片等比例缩小，且不变形。

1. max-width属性

    
        .img{
            max-width: 100%;
            height: auto;
        }

以上代码和CSS，当图片宽度超过父级元素时，将图片自动缩小，不会变形。

三、文字自动换行

如果文本中包含的单词过长，无法进行折行，而只能在较前的位置进行断行，可能会影响排版美观度。这时我们使用以下属性来自动将文本折行。

1. hyphens属性

    
        .txt{
            width: 300px;
            hyphens: auto;/* 自动断行 */
        }

以上代码和CSS，当单个单词长度超过300px时，在单词内部进行断行处理。
但是，该属性不支持所有浏览器，如IE、Edge浏览器就不支持。

2. word-wrap属性

    
        .txt{
            width: 300px;
            word-wrap: break-word;/* 自动换行 */
        }

以上代码和CSS，当单个单词长度超过300px时，直接在单词内部进行断行处理。和hyphens相比，word-wrap支持更多的浏览器，并且能在单词中间进行断行。

原创文章，作者：QOFJI，如若转载，请注明出处：https://www.506064.com/n/360969.html