【常用代码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强制分割

相关推荐
漂洋过海cv3 小时前
Word 插入无页眉页码的空白页(即插入奇数页)
word
response_L3 小时前
国产系统统信uos和麒麟v10在线打开word给表格赋值
java·c#·word·信创·在线编辑
ZhangChuChu_924813 小时前
Word在生成PDF后,PDF左侧导航书签目录错误显示的解决方法
pdf·word
inxunoffice20 小时前
批量将文本文件转换为 Word/PDF/Excel/图片等其它格式
pdf·word·excel
专注VB编程开发20年1 天前
Aspose.words,Aspose.cells,vb.net,c#加载许可证,生成操作选择:嵌入的资源
c#·word·.net·vb.net
专注VB编程开发20年1 天前
无需安装Office进行 Word、Excel操作的微软开发库
microsoft·word·excel
Ljugg2 天前
把doi直接插入word中,然后直接生成参考文献
开发语言·c#·word
2501_907136822 天前
OfficeAI构建本地办公生态:WPS/Word双端联动,数据自由流转
人工智能·word·wps
快乐点吧2 天前
【Word】批注一键导出:VBA 宏
开发语言·c#·word
seasonsyy3 天前
怎么把wps中的word的批注全部删掉
word·wps