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