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