前端文字超出显示。。。

当前端文字超出显示时，可以通过CSS属性来实现省略号展示。首先，使用`white-space: nowrap`使文字一行显示，然后使用`overflow: hidden`使超出父容器宽度的文字隐藏，最后使用`text-overflow: ellipsis`来显示省略号。此外，如果需要将文字与图片在`div`中居中显示，可以设置该`div`的属性为`display: flex`，并使用`justify-content: center`和`align-items: center`来实现垂直和水平居中。

另外，如果需要兼容360浏览器和IE8，并使用jQuery来实现文字超出显示省略号，可以使用以下代码：

<script type="text/javascript">
   $(".intro").each(function () {
       var maxwidth = 108; //显示多少字符
       var textlength = $(this)[0].innerText.length; //计算该div长度
       if (textlength > maxwidth) {
           $(this).html($(this)[0].innerText.substring(0, maxwidth) + '...');
       }
   });
</script>

这段代码会遍历所有class为`intro`的`div`，如果文字长度超过设定的`maxwidth`，则将文字截断并添加省略号。

需要注意的是，以上方法适用范围广，但在文字未超出行的情况下也会出现省略号。可以结合使用JavaScript进一步优化该方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [前端文字超出以省略号展示](https://blog.csdn.net/weixin_42606296/article/details/120397409)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [前端超出文字显示省略号](https://blog.csdn.net/qq_44093213/article/details/113735267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]