关于element中el-table超出长度

       <el-table-column label="专栏简介" align="center" prop="synopsis" width="300">
            <template slot-scope="scope">
              <el-popover
                    trigger="hover"
                    placement="top"
                    width="300"
                    :disabled="isShowPoppver(scope.row.synopsis, 38)"
                  >
                    <p style="max-width: 300px">{{ scope.row.synopsis }}</p>
                    <div slot="reference" class="ellipsis">
                      {{ scope.row.synopsis | ellipsis(37) }}
                    </div>
                  </el-popover>
            </template>
          </el-table-column>
          computed: {
            isShowPoppver() {
              return function (val, limit) {
                if (val && val.length >= limit) {
                  return false;
                } else {
                  return true;
                }
              };
            },
          },
          filters: {
            ellipsis(value, limit) {
              if (!value) return "";
              else if (value.length > limit) {
                return value.slice(0, limit) + "...";
              } else {
                return value;
              }
            },
          },
        .ellipsis {
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }