[Commonly used code 15] The difference between word-break: break-all; and word-wrap: break-word; when the text word exceeds forced segmentation and line break.

Project scenario:

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

After the file is uploaded, the file name is displayed. The name is too long and exceeds the div.

Some file names are as shown below

---

Problem Description

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

Generally, when uploading images, you need to display the file name. Some file names are very long. When displayed on the page, they will exceed the width of the div. The
effect after exceeding is as follows:

---

solve:

word-break

强制分割单词换行，不超出容器宽度大小
The style is placed within the rendered div or p tag

word-break: break-all;

Let’s take a look at the effect. Line

breaks have already been made, and now let’s test the line break properties of another word.

word-wrap

Like this word, wrap, in flexible layout, flex-wrap means line wrapping.

 word-wrap: break-word;

At first glance there seems to be no difference, but the difference is the prefix, attachment 1:

1. word-break: break-all;
   Forces word splitting, but does not start a new line. Able to splice the context and context
2. word-wrap: break-word;
   Words are wrapped to a new line, but the words behind them will be connected to each other, so that the words can fill up one line as much as possible. If the remaining words do not fill up one line, they can be spliced.

As shown below

<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>

---

It is recommended to use break to force splitting