CSS text-overflow:ellipsis使用心得

BUG背景：在把windows中能够正常运行网页中的 text-overflow:ellipsis 部分，打成jar包传输到linux服务器中发现没有运行成功

然后就去研究了一下 text-overflow:ellipsis 的使用注意事项，发现在使用text-overflow:ellipsis属性时，需要注意以下几点：

1 宽度限制

要使省略号生效，必须给容器设置一个固定宽度。如果容器宽度设置为自适应或百分比宽度，text-overflow:ellipsis属性将不起作用。

2 内容超出

text-overflow:ellipsis属性仅在容器内部的文字内容超过容器宽度时才起作用。如果文字内容未超出容器宽度，省略号将不会显示。

3 垂直省略

text-overflow:ellipsis属性只能对水平方向的文字进行省略显示，不能实现垂直方向的省略效果。如果需要垂直方向的省略，可以结合使用overflow: hidden;和height属性来实现。

                                                                                                        注：以上注意内容摘自极客笔记

一看之前的 text-overflow:ellipsis 使用时，并没有放在一个容器里。加上容器后理应来说就能正常运行了，然后就发现了第二个问题：
在<a>模块中的目录名可以正常显示后面的省略号
而<div>模块中的文件名显示为直接被切断了

目录名部分代码：

效果：

文件名部分代码

效果：

既然类的格式都是一样的，那么表达效果为什么会不同呢

这就引出了出现这个BUG的原因

**HTML 元素的默认样式**：`<a>` 和 `<div>` 元素的默认样式有所不同。`<a>` 元素是行内元素，而 `<div>` 元素是块级元素。行内元素的宽度由其内容决定，而块级元素默认占据父容器的全部宽度。

尝试以下解决方案：

1.**将 `<div>` 换成行内元素**：可以尝试将 `<div>` 换成 `<span>`，因为 `<span>` 是行内元素，行为与 `<a>` 类似。

果然，在尝试该方案后问题被成功解决了

如果方案1解决不了的话，可以试试以下方案

2. **为块级元素设置宽度和样式**：如果必须使用 `<div>`，可以尝试显式设置宽度并确保样式正确应用。

    ```html
    <div class="fileName-contain" style="width: 400px;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">
        <div class="file-info" style="display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" th:text="${file.name}"></div>
    </div>
    ```

3. **检查父容器样式**：确保父容器 `.fileName-contain` 的样式正确应用，没有被其他样式干扰。

以下是更新后的代码示例：

```html
<div class="fileName-contain" style="width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    <span class="file-info" th:text="${file.name}"></span>
</div>
```

或

```html
<div class="fileName-contain" style="width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    <div class="file-info" style="display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" th:text="${file.name}"></div>
</div>
```