当前位置:   article > 正文

Element不能自动换行,内容依然超出,直到遇见空格自动换行_el-popover内容不换行导致溢出

el-popover内容不换行导致溢出

我一个前端技术小白,不会前端,没办法,只能使用别人做好的框架。

在最近项目使用Element,需求是要显示日志,日志表格中显示一串SQL。但是,在使用过程中,发现字符串过长,表格显示起来不美观,便用了“show-overflow-tooltip”,但是字符串过长,并没有自动换行。我就改用了弹出框, 对话框, 展开行等方式展示数据,字符串还是如此。如上图所示一样,理想上显示在细线范围的弹出框中,但现实却是字符串没有空格不能自动换行。

问题展示: 点击 “异常信息”下的“点击查看详细”按钮,弹出的“弹出框”中内容有超出。细线方框为理想状态,粗线方框为现实状态。

 

解决:在弹出框中加入了一个div,并设置div属性为强制换行。下面贴上代码。

下面为 html代码:在显示“弹出框”中,将要显示的内容包裹在 div 中

  1. <el-table-column :label="tableColLabel['exceptionMsg']" min-width="150">
  2. <template slot-scope="props">
  3. <el-popover placement="bottom"
  4. title="异常信息"
  5. width="600"
  6. trigger="click"
  7. content="">
  8. <div class="divcss555">
  9. {{ props.row.exceptionMsg }}
  10. </div>
  11. <el-button slot="reference">点击查看详细</el-button>
  12. </el-popover>
  13. </template>
  14. </el-table-column>

下面是js代码,设置 div 强制换行

  1. <style>
  2. .divcss555 {
  3. border: 1px solid #F00;
  4. width: 600px;
  5. height: 100px;
  6. word-break: break-all;
  7. }
  8. </style>

最后是效果展示

其他的换行也和这个相似

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/103338
推荐阅读
相关标签
  

闽ICP备14008679号