css3 单行双行

CSS3 是 Web 开发中极其重要的一部分，它可以创建出各种漂亮、现代化的网页效果，其中单行双行的文字排版就是其中之一。

在 CSS3 中，我们可以通过 white-space 属性和 text-overflow 属性来调整单行或多行文本的排版方式。

/* 展示单行文本换行方式 */p.single-line {
      white-space: nowrap;
     /* 不折行 */  overflow: hidden;
     /* 溢出的文本隐藏 */  text-overflow: ellipsis;
 /* 超出部分用省略号表示 */}
/* 展示多行文本换行方式 */p.multi-line {
      white-space: pre-line;
     /* 保留文本中的换行符，但合并相邻的空格符 */  overflow: hidden;
     /* 溢出的文本隐藏 */  text-overflow: ellipsis;
 /* 超出部分用省略号表示 */}
    

上述代码中，我们使用 white-space 属性来控制文本的折行方式，支持的取值有：

• normal：默认设置，文本将在有需要时自动换行。
• nowrap：文本不自动换行，会从左至右填充整个容器。
• pre：保留文本中的空格和换行符，可以使用 \n 表示换行。
• pre-wrap：保留文本中的空格和换行符，但会自动换行。
• pre-line：保留文本中的换行符，但合并相邻的空格符。

而 text-overflow 属性可以控制文字超出容器时的显示方式，支持的取值有：

• clip：默认设置，超出的文本会被裁剪掉。
• ellipsis：超出的文本会以省略号（...）的形式显示。
• string：指定一个字符串作为省略号。

通过合理的使用这两个属性，我们可以轻松实现单行或双行文本的排版方式，并且能够处理超出容器的情况，使页面更加美观和舒适。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！