Vue はテキスト ボックスの外に省略記号を表示し、マウスをスライドさせてすべてを表示します。

        開発の過程で、スペースが小さすぎて文字が完全に表示されないという問題がよく発生しますが、データによっては大きな影響はないかもしれませんが、同じ終わりで始まり、終わりが異なるデータの記述によっては、それらを区別することはできないかもしれません。解決策: マウスを使用して、すべてのテキストを表示する効果を描画して解決します。

1. :title を使用して、マウスが挿入されたときに対応する情報を表示する効果を実現します。

        title 属性の定義と使用法

title 属性は、要素に関する追加情報を指定します。
この情報は通常、マウスが要素上に移動するとツールヒント テキスト (ツールヒント テキスト) を表示します。

<div title="鼠标划入显示我的信息">
  你好
</div>

2. 追加されたテキストが長すぎて省略記号を表示できない

width: 400px;//设置宽度
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
white-space: nowrap;//只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。

width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

3. 組み合わせて使用​​すると機能が実現します

        インタラクション効果を向上させるために、マウスが挿入されたときに小さな手を表示するcursor: pointer; 属性を追加します。

<template>
  <div title="鼠标划入显示我的信息" class="title">你好你好你好你好</div>
</template>

<script>
export default {
  name: "HomeView",
  components: {},
  data:()=>{
    return {
      title:'鼠标划入显示我的信息'
    }
  }
};
</script>
<style>
.title {
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>