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

文本换行显示——word-wrap属性

word-wrap: 是控制是否断词，而不是端字符。word-wrap : break-word; 只设置这一句，是不会将英文单词从中间断开的。

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

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

word-break: 当取值为break-all时允许非亚洲语言文本行的任意字内断开，比如允许将英文单词从中间断开。word-break : break-all;和设置word-wrap : break-word;word-break : break-all;效果是一样的，都是允许英文单词从中间断开。当取值为keep-all时表示在中文、韩文、日文中是不允许字断开的。

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

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

white-space : 当属性取值为nowrap时，强制文本在一行中显示。当取值为pre时，表示显示预定义文本格式。（我测试的结果，也就是在一行中显示全部）

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

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

解决过程

遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化

请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于是我通过调试工具，在中间加了一个空格，果然就换行两行

解决办法

css可以使用word-break属性来设置强制换行，通过使用word-break属性，可以让浏览器实现在任意位置的换行。

可以使用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>