clientWidth、offsetWidth 和 scrollWidth

注：添加white-space: wrap让内容超出，得到scrollWidth > offsetWidth

  1. <div class="container" style="padding: 10px; border: 5px solid #ccc; width: 50px;white-space: nowrap;">
  2.   content is here and may overflow let's see the result
  3. </div>

clientWidth: 70px;
offsetWidth: 80px; // 50+10*2
scrollWidth: 339px; // 实际内容宽度
image.pngimage.png

word-break 和 white-space

和CSS有关的一些知识 - 图3

演示：word-break

image.png
image.png

image.png

演示：whie-space

image.pngimage.png 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .group {
  10.             display: flex;
  11.             flex-direction: row;
  12.         }
  13.         .container {
  14.           font-size: 13px;
  15.           background: #ccc;
  16.           margin-bottom: 20px;
  17.           margin-left: 20px;
  18.           width: 250px;
  19.           height: 320px;
  20.           margin-right: 150px;
  21.         }
  22.       li {
  23.         list-style: none;;
  24.       }
  25.       .white-space-normal div {
  26.         white-space: normal;
  27.       }
  28.       .white-space-nowrap div {
  29.         white-space: nowrap;
  30.       }
  31.       .white-space-pre div {
  32.         white-space: pre;
  33.       }
  34.       .white-space-pre-wrap div {
  35.         white-space: pre-wrap;
  36.       }
  38.       .white-space-pre-line div {
  39.         white-space: pre-line;
  40.       }
  41.       .white-space-break-space div {
  42.         white-space: break-spaces;
  43.       }
  44.       .container div {
  45.         margin-bottom: 12px;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <h1>空格合并组</h1>
  51.     <div class="group">
  53.         <div class="container">
  55.           <h4>white-space: normal; 默认</h4>
  56.           <p>
  57.             <li>✅  自动换行</li>
  58.             <li>🤔  不认编辑器换行</li>
  59.             <li>✅  非中文连续字符超出无法换行</li>
  61.           </p>
  62.           <div> 开始，                    我左边20个空格的你能看到吗？换到第二行了吗？</div>
  63.           <div> 这里有一个编辑器换行哦，
  64.             实际内容换行了吗</div>
  65.             <div> start,                     there are 20 space left can you see? does word break?</div>
  66.           <div> whaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat if superlongword is here?</div>
  67.         </div>
  69.         <div class="container white-space-pre-line">
  70.             <h4>white-space: pre-line:</h4>
  71.             <p>
  72.               <li>✅  自动换行</li>
  73.               <li>🤔  编辑器换行识别</li>
  74.               <li>✅  非中文连续字符超出无法换行</li>
  75.             </p>
  76.             <div> 开始，                    我左边20个空格的你能看到吗？换到第二行了吗？</div>
  77.             <div> 这里有一个编辑器换行哦，
  78.                 实际内容换行了吗</div>
  79.             <div> start,                     there are 20 space left can you see? does word break?</div>
  80.             <div> whaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat if superlongword is here?</div>
  81.         </div>
  84.         <div class="container white-space-nowrap">
  85.           <h4>white-space: nowrap;</h4>
  86.           <p>
  87.             <li>✅  任何情况都不换行</li>
  88.             <li></li>
  89.             <li></li>
  90.           </p>
  91.           <div> 开始，                    我左边20个空格的你能看到吗？换到第二行了吗？</div>
  92.           <div> 这里有一个编辑器换行哦，
  93.             实际内容换行了吗</div>
  94.             <div> start,                     there are 20 space left can you see? does word break?</div>
  95.           <div> whaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat if superlongword is here?</div>
  96.         </div>
  97.     </div>
  100.     <h1>空格保留组</h1>
  102.     <div class="group">
  103.         <div class="container white-space-pre">
  104.         <h4>white-space: pre;</h4>
  105.         <p>
  106.             <li>✅  编辑器换行会识别</li>
  107.             <li>🤔  内容超出不换行</li>
  108.             <li>✅  连续非中文的字符超出无法换行</li>
  112.         </p>
  113.         <div> 开始，                    我左边20个空格的你能看到吗？换到第二行了吗？</div>
  114.         <div> 这里有一个编辑器换行哦，
  115.             实际内容换行了吗</div>
  116.         <div> start,                     there are 20 space left can you see? does word break?</div>
  117.         <div> whaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat if superlongword is here?</div>
  118.         </div>
  120.         <div class="container white-space-pre-wrap">
  121.         <h4>white-space: pre-wrap;</h4>
  122.         <p>
  123.             <li>✅  编辑器换行会识别</li>
  124.             <li>🤔  内容超出会换行</li>
  125.             <li>✅  连续非中文的字符超出无法换行</li>
  126.         </p>
  127.         <div> 开始，                    我左边20个空格的你能看到吗？换到第二行了吗？</div>
  128.         <div> 这里有一个编辑器换行哦，
  129.             实际内容换行了吗</div>
  130.         <div> start,                     there are 20 space left can you see? does word break?</div>
  131.         <div> whaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat if superlongword is here?</div>
  132.         </div>
  133.     </div>
  135.   </body>
  136. </html>

案例：单行文字超出部分显示…

  2. text-overflow: ellipsis;
  3. overflow: hidden;
  4. white-space: nowrap; // 必须配合上面两个属性一起使用

案例：文字超出容器但不换行展示

假定有一个公告栏宽度500px，公告内容是单行的文字，可能很长例如1000px，希望文字在容器内滚动。如何设置不换行的展示。因为录入时候就是单行文字，可以选择属性和值有哪些。

  • white-space的nowrap、pre可以达到效果，pre可用是因为录入内容时候假定就没有换换行符。
  • word-break的keep-all可以达到效果。

下面是示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.       .container {
  10.         display: flex;
  11.         flex-direction: row;
  12.         overflow: hidden;
  13.         /* white-space: pre; */
  14.         word-break: keep-all;
  15.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="container" style="width:200px;background-color: #ccc;">
  21.       <div class="content" style="border: 1px solid red;background-color: yellow;">1234567890wertyuiopsQWERTYUIOPASDFGHJKLZXCVBNM</div>
  22.     </div>
  23.   </body>
  24. </html>

案例：容器内两个子元素并排显示

默认效果是这样的:
image.png

  1. <div class="container" style="width:200px;background-color: #ccc;">
  2.   <div class="content" style="border: 1px solid red;background-color: yellow;">1234567890wertyuiops1234567890wertyuiops1234567890wertyuiops</div>
  3.   <div class="content" style="border: 1px solid red;background-color: yellow;">1234567890wertyuiops1234567890wertyuiops1234567890wertyuiops</div>
  4. </div>

为了并排展示，我们在container上面增加flex布局
image.png

  1. <div class="container" style="width:100px;background-color: #ccc;">
  2.   <div class="content" style="border: 1px solid red;background-color: yellow;">1234567890wertyuiops1234567890wertyuiops1234567890wertyuiops</div>
  3.   <div class="content" style="border: 1px solid red;background-color: yellow;">1234567890wertyuiops1234567890wertyuiops1234567890wertyuiops</div>
  4. </div>

中文字符展示不正常
image.png

  1. <div class="container" style="width:200px;background-color: #ccc;display:flex;flex-direction: row;border:6px solid green;">
  2.   <div class="content" style="border: 1px solid red;background-color: yellow;">一二三四五六七八就是一二三四五六七八就是一二三四五六七八就是一二三四五六七八</div>
  3.   <div class="content" style="border: 1px solid red;background-color: yellow;">一二三四五六七八就是一二三四五六七八就是一二三四五六七八就是一二三四五六七八</div>
  4. </div>

两种思路都可以解决问题：

  1. 在.content上增加 white-space: no-wrap;
  2. 在.content上增加 flex-shrink: 0; (shrink默认是1按照比例收缩设置为0，代表不收缩按内容显示）

遇到的问题

超长标点符号没换行

在项目中有个用户发表并论的区块，为了评论展示整体齐整，我们对于white-space没有设置任何属性，即换行符会被丢弃掉。但是也发现一个问题，即超长的英文字符，会超出容器展示。break-word既然默认是normal都不能满足，需要更果断的断行，即break-all。对于超长的英文单词，确实会在边界主动换行。但是对于标点符号，例如’…………..’ 在边界仍旧不会换行。

word-break: break-word; 就是那个被当做废弃的属性，虽然能端非中文，但它又会造成中文和英文字符自动断裂。另有两个两个属性用起来（break-word和anywhere）仍旧不能解决文本超出容器的问题：
image.png
在Chrome上写了一个属性，另外一个就不起作用了，可以理解为只有一个属性能表达?

检索了Twitter的style，发现它使用了这两个样式：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow-wrap
https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_word-wrap

已经无法推进了，更多需要了解字体设计等更底层的内容了。

flex-basis和height的差异

flex-basis对于具体的宽度、高度不像height那样有约束力，例如：flex-basis为40px，如果padding为17px 0，line-height为20px，实际高度是 17*2+20=54px，而非40px。

更多疑问待解答

  1. CSS种，为什么使用calc表达式种的变量（其值为具体的px），无法成功被转化为rem？