CSS文本换行设置

最新推荐文章于 2023-10-12 11:19:45 发布
最新推荐文章于 2023-10-12 11:19:45 发布
阅读量1.8w 收藏 16
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/The_Light_/article/details/97618386
版权

1、word-wrap

word-wrap:normal | break-word;

这里设置的是文本内容换行
normal：默认值，当一行剩余空间无法容纳下一个字（英文是指单词）时，会换行
在这里插入图片描述
break-word：针对英文的文本，这个值可以让一个单词拆分开来换行。
在这里插入图片描述
2、word-break

word-break:normal | break-all | keep-all

决定单词是否柴拆分换行。
normal：不拆分单词
在这里插入图片描述
break-all：拆分单词
在这里插入图片描述
keep-all：英文单词不拆分，中文文本不换行
在这里插入图片描述
3、text-overflow

text-overflow: clip | ellipsis

处理文本溢出
clip：不显示省略符（…）
ellipsis：显示省略标记（…），但是要跟overflow:hidden搭配起来使用
4、white-space

white-space: normal | pre | nowrap

normal：默认值，空白会被忽略
pre：空白符，换行符等会被保留
在这里插入图片描述
nowrap：文本不会换行
在这里插入图片描述

brightan
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS控制文本自动换行的问题
10-30
CSS控制文本自动换行的问题
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制，让其看起来接近完美。当CSS3出现的时候，我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。 一、word-wrap的语法 1、语法 复制代码代码如下: word-wrap ： normal || break-word 2、取之说明 (1)normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容
深入研究 CSS 文本换行
热门推荐
wang_yu_shun的博客
05-18 1万+
欢迎和号主【前端点线面】进群盘算法，此外本号干货满满：14个门类（100+篇原创）内容（又干又硬）、《前端百题斩》pdf（助力薪资double）、20+篇思维导图（知识系统化、记忆简单化），进摸鱼群。今天来研究一下 CSS 中的文本换行。正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非常长的英文单词或者很长的URL时，文本可能就不会自动换行，而会溢出所在容器...
css实现强制不换行/自动换行/强制换行
燕子钨
08-29 1353
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{ word-break:break-all; }  
CSS 文字样式,换行,省略
zshsats博客
09-01 1万+
常用的css : 字体: font-family: font-style:normal(正常)|italic(斜体)|oblique(倾斜) font-weight:normal(正常)|bold(粗体)|bolder(特粗体)|lighter(细体) 文本: word-spacing:normal | length 词与词之间的距离值,可以是负数 letter-spacing:no...
CSS 中几种常用的换行方法
最新发布
m0_47791238的博客
10-12 2万+
white-space 属性可以控制元素中文本的换行方式。word-break 属性可以控制单词在换行时的断开方式。：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。（默认值）：文本自动换行，默认情况下会根据容器的大小自动换行。：保留原始的空白符（空格和换行符），文本按照源码中的格式显示。：保留原始的空白符，文本在遇到边界时会自动换行。：合并连续的空白符，文本在遇到边界时会自动换行。：尽量保持多字母语言的连续性，适用于东亚语言。：文本不进行换行，超过容器宽度时会溢出。
css文字换行
qq_52065282的博客
05-11 4689
允许在单词内换行(不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。设置或检索当内容超过指定容器的边界时是否断行。如果不允许的话，长单词就会溢出。强制换行(决定是否允许。的一点是它还是会首先。
css处理标签内容溢出
tianxiawudi0720的专栏
07-03 897
.ellipsis { white-space:nowrap; /强制文本不换行/ text-overflow:ellipsis; /溢出时显示省略号/ overflow:hidden;/溢出部分隐藏/ }.ellipsis { white-space:nowrap; /强制文本不换行/ text-overflow:clip; /溢出时直接裁剪/ overflow:hidden;/溢出
CSS 网页内容换行控制
09-27
在进行DivCSS布局时，需要对文本进行控制，我们在jb51.net以前的文章中，也讲过这方面的知识，今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 　　可以实现HTML中PRE标签的效果，以及单元格的noWrap效果。[code]语法： white-space : normal |
文本换行-截断CSS
01-23
设置div内单行文本截断，文本截断，下载文件内含 关键css和属性解析地址
CSS控制文字换行、裁剪
12-13
关于换行、裁剪的一些CSS属性 word-wrap: normal | break-word normal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况break-word 以单词作为换行依据，如果需要，单词内部允许断行 word-break: normal | break-all | keep-all normal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况 break-all 以字母作为换行依据 keep-all 中英文下和normal相同 white-space: normal || pre || nowrap || pre-line || pre-wrap ||
css文本换行属性word-wrap和white-space使用总结
01-19
今天碰到了td文字内容不换行，发现是：white-space: nowrap，即强制文本不进行换行，顺便看了一下文本换行的属性word-wrap，总结如下： white-space的默认只是normal，自动换行。 word-break:break-all和word-wrap:break-word表示强制换行，前者若英文字符过长自动截断，后者整个英文单词会换行！ 而而我常会这样用： 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容 table中td.th强制换行方法： 复制代码
css控制文字自动换行的实现方法
09-24
下面小编就为大家带来一篇css控制文字自动换行的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS笔记(美化表单）
APieceOfBullshit
02-09 3749
一、表单的基本结构 表单由很多控件构成，如文本框、文本区域、单选按钮、复选框、下拉菜单和按钮等。 一个完整的表单结构应该由三部分组成 1）表单框架（<form>)：<form>是一个包含框，里面包含所有表单对象。 包含处理表单数据的各种属性，如提交字符编码、与服务器交互的页面、HTTP提交方式等 2）表单域（<input>、<select>...
CSS笔记（美化列表）
APieceOfBullshit
02-08 1533
一、列表的基本结构 列表的结构可以分为两种基本类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。 <ul></ul>标识无序列表 <ol></ol>标识有序列表 <li></li>标识列表项目 还有一种特殊列表是定义列表，它包括词条和解释两块内容 <dl&gt
CSS笔记（美化超链接）
APieceOfBullshit
02-08 1437
一、定义超链接 1、超链接分类 1）内部链接（链接的目标在同一网站中，直接相对路径就可以链接的，URL不需要指定协议和互联网位置） 2）外部链接（一般为外部网站目标，需要指定协议和网站地址） 3）锚点链接（锚标记后缀“#”） 2、<a>标签 <a href="https://www.baidu.com/" target="_blank">百度一下</a&g...
css文本换行
06-02
在CSS中，可以使用`white-space`属性来控制文本的换行方式。常用的取值有以下几种： - `normal`：默认值，文本换行时只在空格或者连字符处换行。 - `nowrap`：文本不换行，超出容器宽度的部分会被隐藏。 - `pre`：保留所有空格和换行符，文本按照实际编写的格式显示。 - `pre-wrap`：保留所有空格和换行符，但是允许文本在容器宽度范围内换行。 - `pre-line`：合并空格和换行符，文本在容器宽度范围内换行。 例如，下面的CSS样式可以让文本在容器宽度范围内自动换行： ``` div { white-space: pre-wrap; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值