vue3前端要实现让a标签内容超出范围自动换行效果

今天在实现公司项目的时候遇到了一个文本链接过长时要让其能换行显示其全部文本，我自己的实现思路是直接在<a />标签上加上一个样式“fileA”，应用上CSS中实现超出部分换行的两种方式：使用word-wrap属性，使用overflow-wrap属性。但是好像都没生效。后面经过我主管的指导，他提出他的想法是使用外层使用一个大的div嵌套两个div，一个div放<a />标签，一个div放图标。

其中放置<a />标签的向左浮动，放置图标的像右浮动。

具体的CSS样式如下：放置在<style scope>中，让其只渲染当前页面

其中html部分如下设计：

最终得到的效果展示如下：