超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

时间:2023-03-10 03:24:54
超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

  每门语言总有那么一些不太常用,却又不可或缺的语法操作。下面说一下,在HTML文件中,如何设置用 “省略号” 和 “剪切” 代替大量文字的效果。

以下是HTML的主体代码:

        超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

  首先,中文是默认行末自动换行的。而英文和数字,主流浏览器一般默认为空格处换行。上图,我们先编写2段字符。然后CSS代码见下图:

          超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

  见上图,设置div的大小使其装不下字符,然后对字符设置不断行。这样文字会超出div显示,然后overflow:hidden;让超出部分隐藏不显示,

然后 text-overflow:ellipsis;或者 text-overflow:clip;分别设置隐藏部分用 省略号或剪切效果显示。