实习小记4.28（truncate解决文件名过长溢出父组件问题）

今天在实习的时候遇到这样一个问题，文件的文件名过长导致溢出父元素，排版乱掉

解决方法： 当文本内容超出容器的宽度时，将多余的文本截断并以省略号（...）显示
使用tailwind css中的 truncate

1. overflow: hidden;

• 作用：该属性用于控制当元素的内容超出其指定的尺寸时如何处理溢出的内容。hidden 值表示将溢出的内容隐藏起来，即超出容器范围的文本将不会显示。
• 示例场景：假如有一个宽度固定的 <div> 元素，里面的文本很长，当设置 overflow: hidden; 后，超出 <div> 宽度的文本就不会显示在页面上。

2. text-overflow: ellipsis;

• 作用：text-overflow 属性规定当文本溢出包含它的元素时如何显示。ellipsis 值表示在文本溢出时，使用省略号（...）来表示被截断的部分。
• 示例场景：在一个宽度受限的容器中，当文本过长时，在容器边缘处会用省略号替代被截断的文本，这样用户可以直观地知道还有更多内容未显示。

3. white-space: nowrap;

• 作用：white-space 属性用于设置如何处理元素内的空白符。nowrap 值表示文本不会换行，会在同一行上继续显示，直到遇到 <br> 标签为止。
• 示例场景：对于一个单行显示文本的容器，设置 white-space: nowrap; 可以确保文本不会因为容器宽度不够而自动换行，从而保证文本溢出时能正确应用 text-overflow: ellipsis; 来显示省略号。