1.word-break: break-word与word-wrap: break-word的区别？

答：计算最小宽度（width: min-content）时有区别，word-break: break-word计算的是单个字符的宽度，word-wrap: break-word计算的是单个单词的宽度。

另：word-break:break-word has the same effect as overflow-wrap:anywhere.

2.word-break: break-all与word-wrap: break-word的区别？

答：word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句

3.word-break: break-all与word-wrap: break-word什么时候需要结合使用？

答：word-break: break-all虽然能在任何地方进行断行，但是对于一些中文字符则不行，比如“——”破折号

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .p {

            background: yellow;

            width: 50px;

            word-break: break-all;

            overflow: hidden;

            resize: horizontal;

        }

    </style>

</head>

<body>

    <div class="p">

        h12 h1234 hfdaga ————————————————————

    </div>

</body>

</html>

上面的破折号就会冲到容器的外面去，这时需要word-wrap: break-word的能力，将这些特殊字符进行断行。

4.line-break:anywhere的作用？

答：即使同时使用了word-break: break-all和word-wrap: break-word，HTML任会遵守一些排版规则，比如中文句号“。”不允许出现在行首。

如果想完全规避这些规则，就使用line-break:anywhere。它是真正意义上的随处断行。

word-break,word-wrap,line-break相关知识的更多相关文章

  1. A space or line break was encountered after the "@" character. Only valid identifiers, keywords, comments, "(" and "{" are valid at the start of a code block and they must occur immediately following

    mvc 控制器调用分布视图出错,("A space or line break was encountered after the "@" character. Only ...

  2. LeetCode 5:Given an input string, reverse the string word by word.

    problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...

  3. BFS：UVa1590-IP Networks （子网掩码相关知识）

    IP Networks Alex is administrator of IP networks. His clients have a bunch of individual IP addresse ...

  4. reverse the string word by word

    题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...

  5. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  6. LEB128相关知识

    LEB128相关知识 介绍 LEB128(little endian base 128)是一种变长的整数压缩编码形式,它是出自于DWARF debug file format.在Android的Dal ...

  7. [转帖]xserver相关知识汇总

    xserver相关知识汇总 https://blog.csdn.net/QTVLC/article/details/81739984   本文主要是从以下几个方面介绍xorg-xserver 相关的知 ...

  8. X86 寻址方式、AT&T 汇编语言相关知识、AT&T 与 Intel 汇编语言的比较、gcc 嵌入式汇编

    注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...

  9. FileStream相关知识分享

    一.如何理解FIleStream 通过前3章的学些,相信大家对于Stream已经有一定的了解,但是又如何去理解FileStream呢?请看下图: 我们磁盘中的任何文件都是通过二进制数组组成,最为直观的 ...

  10. Vim编译器的相关知识

    Vim编译器相关知识 1.关于Vim编译器 在热门Linux操作系统中都会默认安装一款超好用的文本编辑器——名字叫“vim”,vim是vi编辑器的升级版. vim 具有程序编辑的能力,可以主动的以字体 ...

随机推荐

  1. linux部署项目（前后端分离项目）

    参考博客 技术栈 路飞学城部署 vue + nginx + uwsgi + django + mysql + redis(就是一个key - value型数据库,缓存型数据库,内存型数据库) 部署步骤 ...

  2. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  3. grafana展示zabbix统计

    1.安装grafana   参照官网文档:https://grafana.com/grafana/download 我这边是centos系统,执行这两个命令 wget https://dl.grafa ...

  4. 使用VPLS跨地域多站点建立二层交换网络

    VLL解决方案 https://www.cnblogs.com/darkchen/p/14652540.html 接上篇文档引出VPLS VLL可以跨地域建立二层交换网络,但有个缺陷是只支持两个sit ...

  5. API Schema in kubernetes

    目录 什么是schema 数据库中的schema Kubernetes中的schema 通过示例了解schema 什么是schema schema一词起源于希腊语中的form或figure,但具体应该 ...

  6. 构建AR视频空间大数据平台（物联网及工业互联网、视频、AI场景识别）

    目       录 1.      应用背景... 2 2.      系统框架... 2 3.      AI场景识别算法和硬件... 3 4.      AR视频空间管理系统... 5 5.    ...

  7. 102_Power Pivot DAX 排名后加上总排名数

    焦棚子的文章目录 请点击下载附件 1.背景 每次写rank的时候,有了排名就可以了,排名1,2,3,4,5这样不是很清晰吗?但是中国式报表的老板们说你能不能在排名后面加一个总排名数呢,就像1/5,2/ ...

  8. vuex+Es6语法补充-Promise

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理 单页面的状态管理/多页面状态管理 使用步骤: // 1.导入 import Vuex from 'vuex' // ...

  9. Mac下最好用的SSH连接客户端 （Termius）

    Termius是微软的一款SSH终端工具,它支持多平台.而且操作界面十分ha好看且简洁,今天分享给大家️ 软件下载 关注下方公众号,回复termius获取下载地址   软件功能介绍 Termius M ...

  10. Git出现“filename too long”错误处理

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年5月8日. 怎么肥事? Windows系统下,在Git使用过程中,出现"filename too long"错误提 ...