在div中文字设置超出换行后，普通汉字可以正常换行，一些特殊的句子无法正常换行。

解决方法：可以使用work-break：break-all让允许在单词内部换行

word-break：break-all

 

1、出现问题的原因：

句子内容为计算机无法识别进行断句的内容。例如：

content:"
日期ICE棉花期货收盘价格美分/英镑2022/5/583.902022/5/434.562022/5/312.452022/5/3123.452022/5/212.342022/5/134.672022/4/2945.672022/4/2876.782022/4/26234.562022/4/2534.562022/4/2435.672022/4/2367.882022/4/2234.562022/4/2378.432022/4/2245.672022/4/2187.982022/4/2078.45
"

2、解决方法：可以使用work-break：break-all让允许在单词内部换行

3、补充说明其他：

word-break: normal|break-all|keep-all；

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

4、设置正常段落文字超出固定宽度后的内容隐藏并显示...（只有一行不进行换行）

 

<template>
  <div style:"width:200px;">
      <div class="news">{{content}}<div>
  </div>
</template>

<script>
    data(){
　　　　return{
          content:“在div css布局中，文字在DIV或任意盒子中超出设置宽度均会自动换行，但是遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。可以使用css将其强制换行”,
       }
　　 }
</script> 

<style> 
.news{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
} 
</style>

 

注意：

• overflow: hidden; 用于将溢出的内容隐藏起来
• white-space: nowrap; 用于防止文字出现换行
• text-overflow: ellipsis; 用于在溢出部位显示省略号

 

5、设置正常段落文字超出固定宽度后的内容隐藏并显示...（换行且最多显示两行）

<template>
    <div class="news">{{content}}<div>
</template>

<script>
    data(){
　　　　return{
          content:“在div css布局中，文字在DIV或任意盒子中超出设置宽度均会自动换行，但是遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。可以使用css将其强制换行”,
       }
　　 }
</script> 

<style> 
.news{
   overflow: hidden;
   display:-webkit-box;
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;

} 
</style>

注意：

• -webkit-line-clamp的值还可以实现3、4、5等等多行文字显示多余隐藏

6、设置非正常段落文字超出固定宽度后的内容隐藏并显示...（非正常段落换行且最多显示两行）

<template>
    <div class="news">{{content}}<div>
</template>

<script>
    data(){
　　　　return{
               content:“日期ICE棉花期货收盘价格美分/英镑2022/5/583.902022/5/434.562022/5/312.452022/5/3123.452022/5/212.342022/5/134.672022/4/2945.672022/4/2876.782022/4/26234.562022/4/2534.562022/4/2435.672022/4/2367.882022/4/2234.562022/4/2378.432022/4/2245.672022/4/2187.982022/4/2078.45”, 
           } 　　 
  } 
</script> 
<style> 
  .news{ 
    overflow: hidden; 
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    -webkit-line-clamp:2; 
    word-break:break-all; 
  } 
</style>

 

注意：

• word-break:break-all;让允许在单词内部换行。