解决方法：可以使用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 class="news">{{content}}<div> </template> <script> data(){ return{ content:“在div css布局中，文字在DIV或任意盒子中超出设置宽度均会自动换行，但是遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。可以使用css将其强制换行”, } } </script> <style> .news{ width:200px; 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;让允许在单词内部换行。