1. 程式人生 > >CSS 超長文字的隱藏和滑鼠覆蓋後顯示

CSS 超長文字的隱藏和滑鼠覆蓋後顯示

在 BootStrap Table 實踐中,資料文字過長導致文字本身溢位表格區域,為了實現滑鼠覆蓋能夠顯示文字,正常狀況下省略顯示。

CSS 檔案,程式碼示例:

.hiddenOverFlowCoverShow:hover
{
    width: 225px;
    font-size: 12px;
    border: 0px solid #ddd;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}
.hiddenOverFlowCoverShow{
    width: 225px;
    font-size: 12px;
    border: 0px solid #ddd;
    color:#5f5f5f;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
JSP 檔案,BootStrapTable 程式碼示例:
{
    field: 'orderRemark',
    title: '備註',
    align: 'center',
    formatter:function(value,row,index){
        var $remark = row.orderRemark;
        var a = '<label class="hiddenOverFlowCoverShow" title='+"'"+$remark+"'"+
                '>'+
                "'"+ $remark +"'"+'</label>'
        return a;
    }
}


相關推薦

CSS 超長文字隱藏滑鼠覆蓋顯示

在 BootStrap Table 實踐中,資料文字過長導致文字本身溢位表格區域,為了實現滑鼠覆蓋能夠顯示文字,正常狀況下省略顯示。 CSS 檔案,程式碼示例: .hiddenOverFlowCoverShow:hover { width: 225px;

div+css文字居中圖片居中

1、純文字居中    #left{        width: 100%;        height:200px;        background: pink;        text-align: center;       line-height: 200px;

CSS 控制容器內文字個數,超出容器顯示省略號 小技巧,大用處

注意:css3標準,ie6,  不支援firefox 容器 {    width:200px;    white-space:nowrap;    text-overflow:ellipsis;    overflow: hidden;    }  white-space:n

文字過長設定隱藏滑鼠hover時顯示在title上

<td> <span class="text-content"> 1.工作內容工作內容工作內容工作內容工作內容工作內容工作內容 2.工

css限制文字行數且超出部分顯示省略號

實現方法: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 適用範圍: 因使用了WebKit的CSS擴充套件屬性,該方法適用於We

關於gridview的item內文字過長換行顯示不完全問題

最近在做一個專案,當中用到gridview,這個gridview的item是有上面是圖片,下面是文字,當文字過長的時候會導致文字顯示不全 不全的效果是第二行字只能看到一部分,或者一部分都看不到。 我不想自定義一個gridview去重新算高度,(自定義當然

push頁面隱藏tabbar,pop顯示tabbar

1:push頁面後隱藏tabba 在pushViewController之前呼叫 [self setHidesBottomBarWhenPushed:YES]; [self setHidesBottomBarWhenPushed:YES];

iOS 設定主介面隱藏navigationBar,跳轉顯示出來

//利用生命週期設定是否隱藏 navigationBar - (void)viewWillAppear:(BOOL)animated {     [superviewWillAppear:

html設定超出部分隱藏滑鼠移上去顯示全部

<td><div :title="item.invoiceNumber" style="width: 200px; height: 20px; overflow: hidden; d

CSS如何實現文字隱藏 超出文字隱藏 滑鼠移入顯示

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

隱藏覆蓋的區別用法

靜態方法 類的變量 靜態 如何 區別 參數類型 子類重寫 pre 父類 講隱藏和覆蓋之前先看兩個概念:靜態類型和動態類型。 任何一個引用變量都有兩個類型:一個叫靜態類型,也就是定義該引用變量的類型;另一個叫動態類型,也就是該引用實際指向的對象類型。 比如對於兩個類A和類B,

css文字(text)字型(font)屬性

文字屬性 1、text-decoration屬性表示文字的修飾 none:取消裝飾 underline :下劃線,與標籤、效果相同 overline :上劃線 line-through :貫穿線(刪除線),與標籤、效果相同 blink :閃爍(因相容性問題很少使用)

css實現滑鼠懸浮的提示效果

一、概述  很多時候網站中需要在滑鼠劃過小圖示時,懸浮出提示性的文字。比如下圖: 滑鼠懸浮後的效果       這種效果可以使用css中的偽類hover來實現。但有時候搞不清兩個元素的巢狀關係。使用了hover卻沒有效果。本人剛開始使用的時候也踩了這個坑。

關於css文字盒子居中的方法

目錄 文字居中 盒子居中 文字居中 1.使用text-align與line-height <!DOCTYPE html> <html> <head> <meta charset="utf-8">

css,div隱藏滾動條,保留滑鼠滾動效果

當我們的內容超出了我們的div,往往會出現滾動條,影響美觀。 尤其是當我們在做一些導航選單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條,也不希望超出去的內容被放逐,就要保留滑鼠滾動的效果。 這裡介紹一個簡單的方法。 大體思路是在div外面

DIV+CSS如何讓圖片文字在同一行

在div+css佈局中,如果一行(或一個DIV)內容中有圖片和文字的話,圖片和文字往往會一個在上一個在下,這是一個新手都會遇到問題,我的解決方法有三: 1.新增CSS屬性:vertical-align:middle; 程式碼: <style> a img{border

通過HTMLCSS設定文字方向

HTML文字中預設的文字方向是left to right。但對於古漢語或者阿拉伯語等語言,文字方向則是right to left。如何實現呢? 1. HTML方式:<bdo dir="rtl"></bdo> 點選進入官方網頁 HTML程式碼如下:

Linux下解決開機登入顯示桌面桌布滑鼠,不顯示其他的問題

7代CPU安裝Ubuntu,報錯Hardware error剛開始安裝,選擇Install Ubuntu,先不按回車,按e進入編輯模式,在quiet splash後加nomodeset然後就可以正常安裝Ubuntu系統了.一開始覺得順風順水.安裝倒是沒事但是有時候重啟進入登入

css--溢位文字顯示省略標記隱藏

在網頁上我們經常看到如下圖的文字省略的顯示方式,那麼是如何做到這種效果的呢?要想解決這個問題,我們先要了解文字溢位隱藏。 word-break:自動換行 normal 使用瀏覽器預設的換行規則。 break-all 允許在單詞內換行。 keep-all 只能在半形空格或連字元處

CSS文字溢位隱藏

###單行文字溢位隱藏 div{ width: 200px; } p{ overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } 效果圖如下: ###多行文字溢位隱藏 只能相