CSS处理table中字段长度显示过长

CSS处理table中字段长度显示过长
<el-table>
   <el-table-column
        label="备注">
        <template slot-scope="scope"> 
                  <el-popover title="详细" trigger="hover" placement="top" width="200">
                      <p>{{ scope.row.XXXX }}</p>
                      <div slot="reference">
                      <p size="medium" style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">{{ scope.row.XXXX}}</p>
                  </div>
              </el-popover>        
        </template>
   </el-table-column>
</el-table>
CSS处理table中字段长度显示过长

总结下来就是

  不换行,超过宽度部分隐藏,文字超过宽度显示省略符号来代表被修剪的文本

对应CSS

  style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;"

 

参考:https://www.cnblogs.com/jdWu-d/p/13692510.html

 

上一篇:CSS设置内容超出宽度时,可以横向滚动,并且隐藏滚动条


下一篇:关于overflow: hidden