首页 > 新闻 > 知识赋能

网站建设切图CSS代码如何做到换行及方法?

2019-03-05 5868
分享至:

       我们在web网页中经常能看到某个元素有超出它本身的宽度的单词,结果会有一个很长的url,会对我们造成页面的不美观和困扰,那么我们应该如何解决这个问题呢?接下来告诉您应该怎样处理这个问题。

       1.可以使用强制换行符号
换行。在文章需要换行的地方加入
即可实现自动换行。如图:

       2.可以使用标签来实现换行。如果在一个文章里需要分段换行形式,可以使用

标签来实现换行,但是需要注意的是p标签的用法。如图:

       3.可以使用CSS设置宽度自动换行。我们可以在一个div里,添加一个div并加入css样式,对加入的div设置对应的css宽度即可实现自行换行。

       4.连续英文字母及数字换行使用CSS换行。用到的css属性word-wrap中word-wrap: break-word属性及值。大家可能会遇到这种问题,但我们按照第三种方法设置宽度来使内容换行,对于连续的数字和英文则无效,这时候就需要div css中对对应的div的css样式设置强制换行断行元素,word-wrap : break-word ;或者word-wrap: break-all;实现强制断行

       5.最暴力的做法即使在容器上添加 overf:hidden; 可以阻止文字或任何东西溢出容器。虽然可以解决视觉上的效果,但它使得文本变得不可访问。

以上就是css中几个处理超长文本溢出容器的处理方式,希望对大家有所帮助。

本文章来源尚品中国:网站建设

来源声明:

本文章系尚品中国编辑原创或采编整理,如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系(010-60259772)。

立即预约专属顾问 开启数字化转型之旅!

10年+资深项目经理1V1服务 | 行业定制化方案 | 精准报价体系
获取策划方案
立即预约专属顾问 开启数字化转型之旅!

咨询我们,获得专业的服务和报价

联系我们,免费获取项目方案及报价,或只是聊一聊您的项目? 在收到您的需求留言后我们将由专业人员于24小时内与您取得联系,请您保持电话畅通!

  • 科研院所解决方案
  • 外贸出海解决方案
  • 协会学会解决方案
  • 集团上市公司解决方案
  • 生物医药解决方案
  • 制造业解决方案
  • 高校教育解决方案
  • 信创网站改造解决方案
更多服务咨询,请联系尚品

010-60259772

您的姓名 *
您的电话 *
您的邮箱
公司名称 *