在web开发中,可以使用html中的br标签进行换行,如果在一个文章里可以在文章需要换行的地方加入
即可实现自动换行-常说的小换行,与换行前没有间隔;使用

标签来实现大换行。也可以使用css属性来实现自动换行和强制换行,连续英文字母及数字换行使用css换行;如果遇到文章标题列表样式,希望不换行,也可以使用css样式属性来进行一些控制。这篇文章就是来聊一聊html,css中的各种换行。

可以先学习php中文网相关的免费课程

1. 学习《html 开发手册》中的
标签和

标签相关教程

html,css中的换行

换行,注意:只对英文有效

a、长单词换行

word-wrap :

normal : 默认,采用浏览器默认形式,不破坏单词结构

break-word : 破坏单词的结构

b 、文本换行

word-break:

取值:normal:

break-all : 破坏单词结构进行换行

keep-all : 在半角状态下的空格下进行换行

一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。

网页的外观是否美观,很大程度上取决于其排版。在页面中出现大段的文字,通常采用分段进行规划,对换行也有极其严格的划分。本节从段落的细节设置入手,使读者学习后能利用标签自如地处理大段的文字。

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word

文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择在半角空格或连字符处换行。例如中文,浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了,会出现撑破容器的现象,很难看.

相关问答

【相关推荐】

php 换行 html_总结html,css中的各种换行方法相关推荐

  1. 总结html,css中的各种换行方法

    html,css中的换行 1. css溢出与换行该如何处理 换行,注意:只对英文有效 a.长单词换行 word-wrap : normal : 默认,采用浏览器默认形式,不破坏单词结构 break-w ...

  2. css中关于文本换行的处理总结

    1. white-space 属性,这个属性有以下几个用法: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. no ...

  3. html里如何定位背景图片,Html+Css CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  4. CSS中背景图定位方法

    在CSS中,background-position的定位方法有三种. 如下: (1)关键字:background-position: top left (2)像素:background-positio ...

  5. php超链接样式,html和css中设置超链接样式方法的总结

    在之前的文章中我们介绍了关于html中超链接的颜色设置,我们都也知道超链接在网站中都是无处不在的,超链接是跳转到另一个页面的入口,当你把鼠标移动到超链接上,会有颜色或者样式的改变,那么我们今天就给大家 ...

  6. java replace换行符_Java 替换字符串中的回车换行符的方法

    使用正则表达式进行替换: 代码片段: string documenttxt = entityutils.tostring(entity,"gbk");//获取数据 document ...

  7. CSS中设置行间距的方法

    在CSS中并没有为我们提供直接设置行间距的方式 我们只能通过设置行高来间接设置行间距,行高越大行间距越大 使用line-height来设置行高 行间距 = 行高 - 字体大小 通过 light-hei ...

  8. css禁止图片保存,CSS中的图片保存方法

    "css中的图片"指的就是镶在CSS样式表中的图片.在我们用在浏览器保存网页时,很多时候,下载网页里的图片都下载不到,这样的话就会使网页非常不美观.所以,今天小编就给大家介绍集中保 ...

  9. CSS中控制不换行属性

    强制不换行属性 white-space:nowrap; word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:break-word; 只对英文起作用,以单词 ...

最新文章

  1. 基于linux的ARM设备升级,烧写Nand flash总结
  2. 如何安全的存储用户密码?(中)代码篇
  3. Spark学习之概念了解
  4. asp.net core监控—引入Prometheus(五)
  5. 修改mysql表的存储引擎
  6. SCPPO(二十三):SQLServer数据库备份那些事儿
  7. 网络技术沙龙:主题:数据库优化、CDN、集群负载均衡(1.9日技术聚会召集)
  8. linux vim 删除 h,Linux VIM 的使用快捷键之删除, 复制, 粘贴
  9. 剖析Disruptor:为什么会这么快?(二)神奇的缓存行填充
  10. 下载《SUN的UNIX操作系统solaris 10 for x86》(solaris 10)ver 10[ISO]
  11. HTML资源嗅探,scrapy-2 嗅探网站,解析HTML
  12. 解决IIS 下ASP程序错误只显示500,不显示具体错误描述的问题!
  13. Nantian PR-2/K10打印机的安装及配置方法
  14. 【墨天轮】openGausss数据库有奖征文活动开始啦!华为平板、京东购物卡等你拿!
  15. 财贸计算机专业,技能月|这所学校的计算机专业部有这些玩法
  16. 【点的定位】Save the Students! UVALive - 5984
  17. ElasticSearch—冷热(hotwarm)架构部署
  18. 球球英雄服务器维护中,球球英雄有效兑换码20208月未过期
  19. 【bzoj3573】[Hnoi2014]米特运输
  20. 博图sodt定时器的用法_图文详解|西门子博途中的定时器指令

热门文章

  1. 16秋南开计算机应用答案,南开16秋学期《计算机应用基础》在线作业.docx
  2. 西北农林科技大学校园网不掉线trick深澜认证Python自动认证2022Windows不掉线
  3. RPR_ABAP_SOURCE_SCAN:扫描代码,查找字符串_SAP刘梦_新浪博客
  4. Java、JSP在线答疑系统
  5. 根据 基因名、bed 文件的基因位置,提取 DNA 序列 bedtools
  6. 敌人的敌人是朋友:苹果欲联手Google干掉Amazon?
  7. Traceback (most recent call last): File setup.py, line 22, in module execfile(join(CURDIR,...
  8. HTC设计出能同时上下滑,和侧滑的Touch手机!用户感觉一定不错
  9. [HBZ分享] 小米手机如何解BL锁
  10. Java期末复习总结