您的位置:

文字超出换行的处理方法

一、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代码中用 “< pre >” 标签,保留换行符和空格。

二、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支持更多的浏览器,并且能在单词中间进行断行。