文本的换行与包裹之简介

介绍在 CSS 中溢出文本的各种处理方式

文本的溢出

在 CSS 中, 如果有一个不可断开的字符串(比如很长的单词), 但是包裹字符串的容器宽度有限, 那么字符串就会在水平方向溢出. 如下

<div class="box">GoodMorningGoodMorningGoodMorningGoodMorning</div>
.box {width: 200px;border: 3px solid salmon;
}

默认 CSS 展示溢出的文字, 因为不这样做数据就会丢失, 所以 overflow 的默认值为 visible. MDN 中讲了这样的原因: 即便溢出的文字会显得混乱和不优雅, 好处是这会让用户“看”到文字而不会错过.

寻找 `min-content` 大小

为了不让文字溢出, 就需要找到能包裹文字的最小长度, 即 min-content.

我们不可以按照字面意思将 min-content 翻译为「最小内容宽度」不然很容易被骗. 这样解释形象一点, 如果有三个人身高分别为 1 米 8, 1 米 7 和 1 米 9, 天花板「最低」要 1 米 9 才可以让所有人都直立站立, 当然天花板 2m 也可以, 3m 也可以但是 1 米 9 是所有可行方案中的「最小」值.

.box {/* width: 200px; */width: min-content;border: 3px solid salmon;
}

盒子成功包裹了文字,

文本的换行与包裹之简介相关推荐

文本的换行与包裹之可能是全网最详细的 line-break 中文介绍
line-break 设置如何处理带有标点和符号的中文.韩文和日文(Chinese, Japanese, Korean(CJK)) 的换行这个属性有五个关键词的值 auto: 使用默认的断行规则; ...
文本的换行与包裹之真的很少使用的 hyphens?
hyphens 告诉浏览器在换行时如何使用连字符. 可以完全不使用连字符, 可以让浏览器决定什么时候连字符, 可以也可以手动控制什么时候使用. 首先, 连字符的 Unicode 为 U+2010, 并 ...
文本的换行与包裹之我都忘了我写过 break-word
break-word 指定如何在单词内断行主要有以下属性值 normal: 使用默认的断行规则. 对于 CJK(Chinese Japanese Korean, 中文日文韩文)可在任意字符后断行, ...
ASP.NET 动态输出Javascript 文本格式换行问题 [ASP.NET | C# | Response]
一.普通输出问题分析.测试 1. 我们先来看一段代码: /// <summary> /// 连接接数据库 /// </summary> ...
java dom xml 换行,dom4j解析xml文件_用DOM解析XML文件，怎么才能让解析出来的文本不用换行_dom解析xml文件...
网友求助:dom4j解析xml文件_用DOM解析XML文件,怎么才能让解析出来的文本不用换行_dom解析xml文件问题importjava.text.SimpleDateFormat; import ...
android staticlayout使用讲解，可实现文本绘制换行处理
原帖地址:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0915/1682.html 使用Canvas的drawText绘制文本 ...
html中怎么让text不换行,css如何让文本不换行？
在html中,连续的数字和字母,以及字母和数字的组合是不会自动换行的:而汉语文字或者其他国家的文字,是文字就会有换行.那么如何让文本不换行?下面本篇文章就来给大家介绍一下,希望对你们有所帮助. 在cs ...
textarea文本不换行的问题
textarea里的文本手动加了换行在div里展示的时候还是成一行显示,有两种解决办法第一种:比较麻烦但也能实现利用js正则 <body> <textarea name=&qu ...
html自动生成段落,HTML中的段落文本怎么换行
HTML中的段落文本怎么换行发布时间:2020-09-22 11:01:35 来源:亿速云阅读:140 作者:小新这篇文章给大家分享的是有关HTML中的段落文本怎么换行的内容.小编觉得挺实用的, ...

文本的换行与包裹之简介

文本的换行与包裹之简介

文本的溢出

寻找 `min-content` 大小

文本的换行与包裹之简介相关推荐

最新文章

热门文章

文本的换行与包裹 之 简介

文本的换行与包裹 之 简介

文本的溢出

寻找 min-content 大小

文本的换行与包裹 之 简介相关推荐

最新文章

热门文章

文本的换行与包裹之简介

文本的换行与包裹之简介

寻找 `min-content` 大小

文本的换行与包裹之简介相关推荐