<template>
   <div class="PreBox">
<!--        <el-popover placement="top-start" width="400" trigger="hover">
          <pre>{{value}}</pre>
          <pre slot="reference" class="pre">{{value}}</pre>
        </el-popover> -->
      <el-tooltip  effect="dark" placement="top-start">
         <pre slot="content" class="pre text">{{value}}</pre>
         <pre class="pre preH">{{value}}</pre>
      </el-tooltip>
   </div>
</template>

<script>
var that;
export default {
  name: 'PreBox',
  props: {
    value:{
      type:String,
      default:'',
    },
  },
  data() {
    return {
    };
  },
};
</script>

<style scoped="scoped" lang="scss">
  .pre{
    margin: 0 !important;
    font-family: 微软雅黑;
  }
 .preH{
   overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   padding: 0 5px;
 }
 .text{
   max-width: 800px;
   white-space:pre-wrap;/*css-3*/
   white-space:-moz-pre-wrap;/*Mozilla,since1999*/
   white-space:-pre-wrap;/*Opera4-6*/
   white-space:-o-pre-wrap;/*Opera7*/
   word-wrap:break-word;/*InternetExplorer5.5+*/
 }
</style>
