Vue超出文本框顯示省略號鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法
更新時間：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)移到元素上時顯示一段工具提示文本（tooltip text）。
<div title="鼠標(biāo)劃入顯示我的信息"> 你好 </div>
二、添加文本太長顯示省略號
width: 400px;//設(shè)置寬度 overflow: hidden;//溢出隱藏 text-overflow: ellipsis;//屬性值表示當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記，省略標(biāo)記插入的位置是最后一個字符。 white-space: nowrap;//只保留一個空白，文本不會換行，會在在同一行上繼續(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)文章
關(guān)于Vue項(xiàng)目跨平臺運(yùn)行問題的解決方法
這篇文章主要介紹了關(guān)于Vue項(xiàng)目跨平臺運(yùn)行問題的解決方法，特別記錄一下踩的坑，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
在UniApp中實(shí)現(xiàn)App與H5頁面的跳轉(zhuǎn)及通信的代碼示例
在移動應(yīng)用開發(fā)中,內(nèi)嵌 H5 頁面或與外部網(wǎng)頁交互是常見需求,UniApp 作為跨平臺框架,提供了靈活的方式實(shí)現(xiàn) App 與 H5 的跳轉(zhuǎn)和雙向通信,本文將詳細(xì)講解實(shí)現(xiàn)方法,并提供可直接復(fù)用的代碼示例,需要的朋友可以參考下2025-04-04
下面小編就為大家分享一篇vue刷新和tab切換實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue中組件＜router-view＞使用方法的相關(guān)資料,Vue 路由中的 <router-view/> 是用來承載當(dāng)前級別下的子級路由的一個視圖標(biāo)簽,此標(biāo)簽的作用就是顯示當(dāng)前路由級別下一級的頁面,需要的朋友可以參考下2024-06-06
electron踩坑之remote of undefined的解決
這篇文章主要介紹了electron踩坑之remote of undefined的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
本文主要介紹了Vue全局注冊與局部注冊兩種組件注冊的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue柱狀進(jìn)度條圖像的完美實(shí)現(xiàn)方案
本文是對bar進(jìn)度條實(shí)現(xiàn)的2種方案進(jìn)行分享，第一種是很簡單，純css的實(shí)現(xiàn)，第二種是echart的實(shí)現(xiàn)。對vue柱狀進(jìn)度條圖像的實(shí)現(xiàn)方案，感興趣的朋友跟隨小編一起看看吧2019-08-08
Vue使用ExcelJS實(shí)現(xiàn)專業(yè)級Excel導(dǎo)出解決方案
ExcelJS 是 Node.js 和瀏覽器環(huán)境中功能最全面的 Excel 處理庫之一,就像一個專業(yè)的 Excel 工作站,下面小編就為大家詳細(xì)介紹一下如何使用ExcelJS實(shí)現(xiàn)專業(yè)級Excel導(dǎo)出吧2025-07-07
這篇文章主要介紹了vue3腳手架簡單靜態(tài)路由,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05