In the development process encountered content description, will encounter this situation, description area is limited, in the description of too much text to add… The excess part is omitted
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Copy the code
We need to mouse over to show the tooltip when exceeding, and hide the tooltip when exceeding.
The code is as follows:
<--html-->
<el-tooltip 
    class="item"
    :disabled="isShowToolTip"
    :content="content"
    placement="top">
    <div class="tooltip" :ref="`fatherRef${index}`" @mouseover="mouseoverTip(index)"><span :ref="`sonRef${index}`">{{content}}</span></div>
</el-tooltip>

<--js-->
mouseoverTip(index) {
    // Width of the parent element
    const fatherW = this.$refs[`fatherRef${index}`].offsetWidth;
    // The width of the child element
    const sonW = this.$refs[`sonRef${index}`].offsetWidth;
    // Displays tooltip when the child element is larger than the parent element
    this.isShowToolTip = ! (sonW >= fatherW); } <-- CSS --> At least give the parent element a maximum width or a fixed width. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } This method toggles the Disabled property of the tooltip as the mouse moves uptrue/false, has achieved the desired effect. In Chrome, the span width is limited by the width of the parent div, so the child and parent elements are always less than or equal to the width of the parent, resulting in ellipsis and mouse movement without triggering the tooltip. Tooltip {max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; span{position: relative; }}Copy the code