文字溢位部分自動滾動顯示

2021-08-20 05:11:57 字數 394 閱讀 3632

我們在一定區域裡面寫文字的時候經常會出現文字溢位的現象,一般情況下會使用

[html]view plain

copy

overflow: hidden;  

text-overflow: ellipsis;  

white-space: nowrap;  

實現溢位隱藏,即用省略號代替溢位的部分,這樣比較美觀而且溢位部分的詳情也可以點進相應的詳情頁面去查詢,但是如果這段文字本來就在詳情頁面裡面了還能用省略號代替麼?顯然是不可以的,這時我們可以讓文字溢位部分自動滾動顯示。

**如下:

[html]view plain

copy  

文字如果超出了自動向左滾動

文字溢位顯示省略

在做靜態頁面的有時候,有些文字內容我們考慮不多,就簡單的寫幾個文字放在那裡顯示,瀏覽靜態檔案的時候沒什麼問題,當後台開發講頁面套好資料後,可能有些文字比較長,這樣我們以前定義單行的內容就會出現換行,頁面的改區域就不能正常顯示了,出現錯位。這個問題我需要提前想到,解決辦法有很多種,前端和後台都有處理的...

容器文字溢位title顯示

我們經常會出現容器內文字溢位問題,我們可以給容器新增屬性 classname這樣文字溢位會出現省略,在樣式上好看了很多 但是文字的全部能容卻看不見了。由此引發了我的 風暴,來看下面 body.on mouseover classname function textwidth.remove 原理就是通...

純css實現文字溢位部分顯示為省略號

在專案中常常遇到某段文字長度超出了設計的內容,對於溢位的文字需要處理成省略號,於是我就目前遇見過的情況總結一下。這種情況是最簡單的。class text 你以為我會告訴你這一段文字已經超出長度了嗎?p 複製 以上面的一段內容為例子。如果固定寬度為100px,只需要顯示一行。如下 text 複製 然後...