广告位联系
返回顶部
分享到

CSS中几种常用的换行方法总结

css 来源:互联网 作者:佚名 发布时间:2023-12-17 19:19:19 人浏览
摘要

1、使用 br 元素: 最简单的换行方法是在需要换行的位置插入 元素。例如: 1 pThis is a sentence.brIt will be on a new line./p 这会在 This is a sentence. 和 It will be on a new line. 之间创建一个换行。

1、使用 br 元素:

最简单的换行方法是在需要换行的位置插入
元素。例如:

1

<p>This is a sentence.<br>It will be on a new line.</p>

这会在 “This is a sentence.” 和 “It will be on a new line.” 之间创建一个换行。

效果:

2、使用 white-space 属性:

white-space 属性可以控制元素中文本的换行方式。常用的取值有:

  • normal(默认值):文本自动换行,默认情况下会根据容器的大小自动换行。
  • nowrap:文本不进行换行,超过容器宽度时会溢出。
  • pre:保留原始的空白符(空格和换行符),文本按照源码中的格式显示。
  • pre-wrap:保留原始的空白符,文本在遇到边界时会自动换行。
  • pre-line:合并连续的空白符,文本在遇到边界时会自动换行。

例如,将一个 div元素的 white-space 属性设置为 pre-wrap 可以实现自动换行:

1

2

3

4

5

6

7

8

<style>

  .multiline {

    white-space: pre-wrap;

  }

</style>

<div class="multiline">

  This is a long sentence that will be wrapped to the next line if necessary.

</div>

效果:

3、使用 word-break 属性:

word-break 属性可以控制单词在换行时的断开方式。常用的取值有:

  • normal(默认值):不强制断行,尽可能保持单词完整性。
  • break-all:允许在单词内部断行,例如超出容器宽度时会将单词拆分为多行显示。
  • keep-all:尽量保持多字母语言的连续性,适用于东亚语言。

例如,将一个 p元素的 word-break 属性设置为 break-all 可以实现单词内部的换行:

1

2

3

4

5

6

<style>

  p {

    word-break: break-all;

  }

</style>

<p>Thisisalongwordthatwillbebrokenintomultiplelinesifnecessary.</p>

效果:


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计