text-overflow-文本溢出包含樣式設(shè)置

Keven 發(fā)布于2019-08-29 11:15 / 1697人閱讀

摘要：需求該列展示文本的單元格寬度固定，文本超出部分顯示為，當(dāng)把鼠標(biāo)移到文字上時(shí)，展示完整信息。效果沒有獲得焦點(diǎn)時(shí)獲得焦點(diǎn)時(shí)另一種實(shí)現(xiàn)方案利用屬性部分必須必須必須部分如果您把光標(biāo)移動(dòng)到下面上，就能夠看到全部文本。

背景：

在列表中展示文本信息，但是有的文本信息過長，大部分則較短，若是不加控制，完全顯示文本信息，列表會(huì)被撐開，很不美觀。

需求：

該列展示文本的單元格寬度固定，文本超出部分顯示為...，當(dāng)把鼠標(biāo)移到文字上時(shí)，展示完整信息。

代碼實(shí)現(xiàn)：

css部分

html部分

如果您把光標(biāo)移動(dòng)到下面 div 上，就能夠看到全部文本。
This is some long text that will not fit in the box

效果

（1）沒有獲得焦點(diǎn)時(shí)

（2）獲得焦點(diǎn)時(shí)

另一種實(shí)現(xiàn)方案——利用title屬性

css部分

html部分

如果您把光標(biāo)移動(dòng)到下面 div 上，就能夠看到全部文本。
This is some long text that will not fit in the box

云服務(wù)器 GPU云服務(wù)器溢出文本 php文本溢出省略包含了某個(gè)文本文本樣式html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111523.html

相關(guān)文章

談?wù)?em>text-overflow的那些坑和應(yīng)對(duì)方法

摘要：基本語法默認(rèn)值，將溢出的文本裁減掉將溢出的文本用省略號(hào)來表示設(shè)置一個(gè)字符串用來表示溢出的文本兼容性上，除了外，其余兩個(gè)屬性兼容到了，所以大可放心使用。原文地址：https://www.xksblog.top/the-p... text-overflow是CSS3中的屬性，它規(guī)定了當(dāng)文本溢出其包含元素時(shí)以何種方式顯示。但在使用的時(shí)候，有時(shí)會(huì)發(fā)現(xiàn)這個(gè)text-overflow設(shè)置了屬性...

nodejh 2019-08-29 16:26 評(píng)論0 收藏0
『總結(jié)』CSS/CSS3常用樣式與web移動(dòng)端資源

摘要：常用樣式強(qiáng)制文本顯示單行顯示語法讓一段文字在固定寬度在一行顯示，最后一個(gè)字符為省略標(biāo)記，樣式如下多行文本最后省略號(hào)這里用到了文本溢出顯示省略號(hào)的，即設(shè)置溢出文本顯示為省略標(biāo)記語法新增加的表示直接裁切溢出的文本表 css/css3常用樣式強(qiáng)制文本顯示單行顯示語法：white-space:nowrap;讓一段文字在固定寬度在一行顯示，最后一個(gè)字符為省略標(biāo)記(...)，css樣式如下 d...

caoym 2019-08-29 13:24 評(píng)論0 收藏0
flex實(shí)現(xiàn)左右布局中按鈕溢出隱藏效果

摘要：先回顧下關(guān)于文本溢出隱藏的方式單行文本當(dāng)然還需要加寬度屬來兼容部分瀏覽。多行文本顯示行數(shù)然后開開心心的開始寫啊寫，代碼如下代碼這是一個(gè)按鈕元樣式這效果。。最近在開發(fā)公司項(xiàng)目的時(shí)候UI設(shè)計(jì)稿給了這么一個(gè)設(shè)計(jì)(這里是我手動(dòng)畫的草圖)：showImg(http://images.pingan8787.com/70-UI%E7%A4%BA%E6%84%8F%E5%9B%BE.png);看這效...

CoffeX 2019-08-29 17:26 評(píng)論0 收藏0
移動(dòng)端的text-overflow多行文本溢出顯示省略號(hào)(…)

摘要：大家應(yīng)該都知道用屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)。但是這個(gè)屬性并不支持多行文本溢出顯示省略號(hào)，這里根據(jù)應(yīng)用場景介紹幾個(gè)方法來實(shí)現(xiàn)這樣的效果。，可以用來多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。大家應(yīng)該都知道用text-overflow:ellipsis屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。 overflow: hidden; te...

thekingisalwaysluc 2019-08-30 10:49 評(píng)論0 收藏0