CSS英文字符串换行（word-break: break-all 或者 word-wrap）

文章参考

1. 英文强制换行css 使用css强制英文单词断行代码
2. css强制换行

知识点

CSS中的“word”是指一个单词或词组，可以用来定义文本的样式和布局。在CSS中，我们可以使用“word-wrap”属性来控制单词的换行和宽度，使用“word-break”属性来控制单词的 breaks 和换行方式。

“word-wrap”属性允许我们将一个单词或词组wrap到新行，如果新行已经存在，则将单词或词组移动到新行。例如，如果我们使用“word-wrap:wrap”属性将一个单词或词组wrap到新行，则该单词或词组将在新行中显示。

==“word-break”属性控制单词的break方式，包括默认的“break-all”和“break-word”方式。==默认情况下，单词不会根据行 break 方式被分成不同的部分。如果我们要使单词根据行 break 方式被分成不同的部分，可以使用“break-word”方式。例如，如果我们使用“word-break:break-word”属性将一个单词分成两个部分，则该单词将在每个部分中显示。

除了这两个属性外，还有一些其他的word属性，如“word-break-候选项”、“word-wrap-mode”等，这些属性也可以用来控制单词的样式和布局。通过使用这些属性，我们可以轻松地定义CSS样式，使文本的布局更加灵活和多

案例一：div 控件内容全部英文没有间断

在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)'，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug

解决过程

1. 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化
2. 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于是我通过调试工具，在中间加了一个空格，果然就换行两行

解决办法

1. css可以使用word-break属性来设置强制换行，通过使用word-break属性，可以让浏览器实现在任意位置的换行。
2. 可以使用word-wrap: break-word;;样式强制英文单词内断行。

word-wrap : break-word ;

允许长单词换行到下一行。
当一个单词长度超过div的宽度时，默认是不会换行的

案例二：flex 实现左右布局

利用 flex-grow:1 实现左边固定，剩余100%的左右布局，代码如下：

<div class="detailContainer--item">
         <div class="detailContainer--item__label">发送内容:</div>
         <div class="detailContainer--item__value">
           {{ selectRowObj.sendMsg || '无' }}
         </div>
</div>

<style lang="scss" scoped>
.detailContainer {
 &--item {
   display: flex;
   margin-bottom: 10px;
   &__label {
     width: 100px;
   }
   &__value {
     flex-grow: 1;
   }
 }
}
</style>

解决办法
word-break: break-all; 强制让代码换行，左边固定值设置最小宽度min-width

 <div class="detailContainer--item">
         <div class="detailContainer--item__label">发送内容:</div>
         <div class="detailContainer--item__value">
           {{ selectRowObj.sendMsg || '无' }}
         </div>
</div>
<style lang="scss" scoped>
.detailContainer {
 &--item {
   display: flex;
   margin-bottom: 10px;
   &__label {
     width: 100px;
     min-width: 100px; // 设置最小宽度
   }
   &__value {
     flex-grow: 1;
     word-break: break-all; // 强制内容换行
   }
 }
}
</style>

案例三：左侧不固定，右侧要自动换行

 <div class="info">
     <div class="info--label">任务ID：</div>
     <div class="info--value" :title="detailObj.id">{{detailObj.id || '--'}}</div>
</div>
<style lang="scss" scoped>
.info {
        display: flex;
        margin-bottom: 12px;
        width: 100%;
        overflow: hidden;


        &--label {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(77, 77, 77, 0.70);
          letter-spacing: 0;
          font-weight: 400;
          min-width: 58px;
          max-width: 84px;
        }

        &--value {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #4D4D4D;
          letter-spacing: 0;
          font-weight: 400;
          //border: 1px solid red;
          white-space: break-spaces;
          flex: 1;
          word-break: break-all;
        }
        //&::after{
        //  content: '';
        //  //display: inline-block;
        //  clear: both;
        //}
      }
</style>