overflow-wrap: break-word； word-break: break-all； word-break: keep-all； white-space: nowrap；区别

亦凉 2022-12-05 05:27 169阅读 0赞

忘记在哪转载的了，只做记录

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title></title>
        <style type="text/css"> body { font-size: 18px; } p, h3 { font-family: "Microsoft YaHei UI", tahoma, Hiragino Sans GB, sans-serif; font-weight: bold; } .box { width: 300px; height: 50px; border: 1px solid red; } .box1 { /*垂直空间不足时，“强制换行”*/ overflow-wrap: break-word; } .box2 { word-break: break-all; } .box3 { word-break: keep-all; } .box4 { /*文本内容不换行 使用场景： 广告语，文章标题 */ white-space: nowrap; } </style>
      </head>
      <body>
        <h3>提示：通过浏览器调整.box宽度，查看效果</h3>
        <p>overflow-wrap: break-word; 浏览器自行决定在何处“截断”单词<br /></p>
        <div class="box box1">Hello World Hello,World Hooooooooooole</div>
        <p>word-break: break-all; 强行截断单词！<br /></p>
        <div class="box box2">Hello World Hello,World Hooooooooooole</div>
        <p>word-break: keep-all; 不准许“截断” 单词！！<br /></p>
        <div class="box box3">Hello World Hello,World Hooooooooooole</div>
        <p>white-space: nowrap; 永不换行<br /></p>
        <div class="box box4">Hello World Hello,World Hooooooooooole</div>
      </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 KeepAlive详解

> 干货好文，转载保存，以备后看。借此也分享给大家。目录什么是KeepAlive？ TCP的KeepAlive 1.为什么要有KeepAlive？ 2.怎么开启K

亦凉/ 2023年07月06日 14:31/ 0 赞/ 98 阅读

相关 grpc keepalive

文章目录 grpc keepalive TCP KeepAlive grpc keepalive 官方原文链接：https://github.c

妖狐艹你老母/ 2023年01月23日 10:52/ 0 赞/ 51 阅读

相关 tcp KeepAlive vs http KeepAlive

文章目录 1. 写在最前面 2. 两种 KeepAlive 的区别 3. 验证 KeepAlive 3.1 h

深藏阁楼爱情的钟/ 2022年12月29日 14:03/ 0 赞/ 288 阅读

相关 vue keepalive

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不

男娘i/ 2022年11月01日 10:54/ 0 赞/ 284 阅读

相关 html table nowrap,HtmlTableCell.NoWrap 属性 (System.Web.UI.HtmlControls) | Microsoft Docs

获取或设置一个值，该值指示当到达单元格末尾时，由 HtmlTableCell 类的实例所表示的单元格中的文本是否自动继续在下一行显示。Gets or sets a value

本是古典何须时尚/ 2022年10月09日 00:44/ 0 赞/ 211 阅读

相关 white-space:nowrap文本边长

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 设置position 转载于:https://my.o

迷南。/ 2022年10月02日 00:32/ 0 赞/ 394 阅读

相关 Keepalive

1 What is Keepalived ? Keepalived is a routing software written in C. The main goal

待我称王封你为后i/ 2022年07月13日 03:55/ 0 赞/ 334 阅读

相关 Keepalive 安装

keepalived介绍：Keepalived的作用是检测web服务器的状态，如果有一台web服务器死机，或工作出现故障，Keepalived将检测到，并将有故障的web 服

绝地灬酷狼/ 2022年06月12日 13:48/ 0 赞/ 318 阅读

相关大话keepalive

大话keepalive 我们说到keepalive的时候，需要先明确一点，这个keepalive说的是tcp的还是http的。 tcp的keepalive是侧重在保持客

柔情只为你懂/ 2022年05月30日 08:23/ 0 赞/ 300 阅读

相关 [leetcode]动态规划之wordbreak

动态规划之wordbreak 题目知识点思考代码题目 [leetcode入口][leetcode] 知识点 unorder

短命女/ 2021年09月28日 14:48/ 0 赞/ 444 阅读