Vue超出文本框顯示省略號鼠標滑入顯示全部的實現方法
更新時間：2023年10月17日 10:48:19 作者：勇敢小陳
在Vue項目中經常需要處理文本內容過長的情況,這篇文章主要給大家介紹了關于Vue超出文本框顯示省略號鼠標滑入顯示全部的實現方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
前言
在開發(fā)過程中經常會遇到空間太小文字展示不全的問題，對于一些數據可能影響不大，但對于一些數據描述開頭都是一樣結尾不同的可能就沒辦法區(qū)分了。解決辦法：通過鼠標劃入展示全部文字的效果用來解決。
一、通過 :title 實現鼠標劃入展示對應信息的效果
title屬性的定義和用法
title 屬性規(guī)定關于元素的額外信息。
這些信息通常會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）。
<div title="鼠標劃入顯示我的信息"> 你好 </div>
二、添加文本太長顯示省略號
width: 400px;//設置寬度 overflow: hidden;//溢出隱藏 text-overflow: ellipsis;//屬性值表示當對象內文本溢出時顯示省略標記，省略標記插入的位置是最后一個字符。 white-space: nowrap;//只保留一個空白，文本不會換行，會在在同一行上繼續(xù)，直到遇到br標簽為止。
width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
三、配合使用，實現功能
添加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>總結
到此這篇關于Vue超出文本框顯示省略號鼠標滑入顯示全部的文章就介紹到這了,更多相關Vue超出文本框顯示省略號內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue使用Intersection?Observer檢測元素是否展示
Intersection?Observer?是一個瀏覽器原生的?API,用于異步觀察目標元素與其祖先元素或頂部視口之間的交叉狀態(tài)變化,本文就來聊聊如何使用Intersection?Observer檢測元素是否展示吧2024-11-11
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vuex在vite&vue3中的簡單使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue3中通過ref獲取元素節(jié)點的實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue2.0/3.0中provide和inject的用法示例
provide和inject是成對出現的,主要用于父組件向子孫組件傳遞數據,這篇文章主要給大家介紹了關于vue2.0/3.0中provide和inject用法的相關資料,需要的朋友可以參考下2021-09-09
vue3使用el-radio-group獲取表格數據無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數據無法選中問題及解決方法,本文給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05
vue中使用keep-alive動態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動態(tài)刪除已緩存組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08