写一个组件如果文本超过容器宽度鼠标hover有el-tootips组件, 并且可以配置展示一行或者多行，如果不超过容器宽度则没有el-tootips组件

好的，我来为您解答。

您可以使用Vue.js和Element UI来实现这个组件。

首先，您需要在模板中定义一个容器，使用CSS中的`overflow: hidden`来控制文本溢出。然后，您可以使用`<el-tooltip>`组件来实现鼠标hover时的提示。

如果您需要支持单行或多行文本，可以添加一个prop来控制文本的显示方式。在单行模式下，您可以使用CSS中的`white-space: nowrap`来防止文本换行。

下面是一个简单的示例代码：

<template>
  <div class="container" :class="{ 'single-line': isSingleLine }">
    <el-tooltip v-if="isOverflow" effect="dark" :content="text">{{ text }}</el-tooltip>
    <span v-else>{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true,
    },
    isSingleLine: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isOverflow() {
      return this.$el.scrollWidth > this.$el.clientWidth;
    },
  },
};
</script>

<style scoped>
.container {
  overflow: hidden;
}

.container.single-line {
  white-space: nowrap;
}
</style>

在该组件中，使用`isOverflow`计算属性来检查文本是否超过容器宽度。如果是，则显示`<el-tooltip>`组件，否则显示文本本身。

注意，`<el-tooltip>`组件需要指定`content`属性来显示提示文本。

在CSS中，我们使用`.single-line`类来控制文本是否换行。

最后，您可以使用该组件来渲染您的文本，例如：

<template>
  <div>
    <my-component :text="longText" :isSingleLine="false" />
    <my-component :text="shortText" :isSingleLine="true" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      longText: 'This is a very long text that will overflow the container width',
      shortText: 'Short text',
    };
  },
};
</script>

这样，您就可以根据需要渲染单行或多行文本，并在文本溢出时显示`<el-tooltip>`组件了。