【常用代码15】文字单词超出强制分割换行,word-break: break-all;和word-wrap: break-word;的区别

项目场景:

提示:这里简述项目相关背景:

文件上传后显示文件名,名称过长,超出div

有些文件名如下图


问题描述

提示:这里描述项目中遇到的问题:

一般图片上传,要展示文件名,有些文件名很长,在页面上展示,会超出div宽度

超出后效果如下图


解决:

word-break

强制分割单词换行,不超出容器宽度大小

样式放在渲染的div或者p标签内

css 复制代码
word-break: break-all;

再来看效果

已经换行了,然后现在来测另一个单词换行的属性

word-wrap

像这个单词一样,wrap,在弹性布局里面flex-wrap,就是换行。

css 复制代码
 word-wrap: break-word;

乍一看好像没区别,但是,区别就是前缀,附件1:

  1. word-break: break-all;
    强制分割单词,但是不会另起一行。会拼接前后文
  2. word-wrap: break-word;
    单词换行,另起一行,但是后面的会接上,要尽可能满足单词撑满一行,如果剩余没撑满一行,可以拼接。

如下图

html 复制代码
<template v-for="(file, index) in item.files">
    <div :key="file.fileId" v-if="file.fileId" class="file-item" @click="onLookFile(file)">
         附件{{ index + 1 }} :{{ file.originalFileName }}测试尾缀
    </div>
</template>

推荐使用break强制分割

相关推荐
振宇i6 分钟前
Java 富文本转word
java·word·富文本·docx4j
南博萬1 天前
java将pdf转换成word
java·pdf·word
zhishishe2 天前
2025 年免费 Word 转 PDF 转换器有哪些?
android·windows·pdf·电脑·word
神奇侠20242 天前
基于PaddleOCR对图片中的excel进行识别并转换成word(一)
python·word·excel·paddleocr
zhishishe2 天前
工具指南:免费将 PDF 转换为 Word 的 10 个工具
android·windows·pdf·word
zhishishe3 天前
Word技巧:如何在 Mac 和 Windows 上检索未保存的 Word 文档
windows·macos·word
usdoc文档预览4 天前
Office文件内容提取 | 获取Word文件内容 |Javascript提取PDF文字内容 |PPT文档文字内容提取
javascript·pdf·word·ppt·office文件在线预览·word文档在线预览·ofd预览转pdf
AI偶然4 天前
AI智能体|扣子(Coze)搭建【一键转换为Word/pdf/Excel】工作流保姆级教学
人工智能·pdf·word
zdlu5 天前
Deepseek输出的内容如何直接转化为word文件?
word·deepseek
救救孩子把5 天前
Spring Boot 集成Poi-tl实现动态Word文档生成
spring boot·word