先看效果:

 

//后端接口可以返回两个数据,一个带换行符,一个不带
<el-table-column prop="respInfo" label="责任人" align="center" min-width="100px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              <div v-html="scope.row.respInfoTemp"></div>
            </div>
            <div class="ellipsis">{{scope.row.respInfo}}</div>
          </el-tooltip>
        </template>
</el-table-column>


// css文字超出...
/deep/ .ellipsis {
  white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

数据结构(有换行符):1、这是第一行;<br>2、这是第二行;<br>3、想在哪换行就在哪加换行符;

数据结构(表格中显示的):1、这是第一行;2、这是第二行;3、想在哪换行就在哪加换行符;

换行符:<br> 

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐