亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Keven / 1762人閱讀

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

背景：

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

需求：

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

代碼實現(xiàn)：

css部分

html部分

如果您把光標移動到下面 div 上，就能夠看到全部文本。


This is some long text that will not fit in the box

效果

（1）沒有獲得焦點時

（2）獲得焦點時

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

css部分

html部分

如果您把光標移動到下面 div 上，就能夠看到全部文本。


This is some long text that will not fit in the box

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111523.html

相關(guān)文章

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

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

    nodejh 評論0 收藏0

  • 『總結(jié)』CSS/CSS3常用樣式與web移動端資源

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

    caoym 評論0 收藏0

  • flex實現(xiàn)左右布局中按鈕溢出隱藏效果

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

    CoffeX 評論0 收藏0

  • 移動端的text-overflow多行文本溢出顯示省略號(…)

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

    thekingisalwaysluc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<