bootstrap表格限制內容長度，多餘內容用省略號替代

阿新 • • 發佈：2018-11-26

table效果：
這裡寫圖片描述
原始碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 Bootstrap --> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢 -->
    <!-- 注意： 如果通過 file://  引入 Respond.js 檔案，則該檔案無法起效果 -->
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]--> 

    <style>
        .table>tfoot>tr>td {
            border-bottom: 1px solid #ddd;
        }

        th {
            text-align: left;
            padding-left: 15px !important;
            background-color: #019297;
            color: #fff !important;
            border-bottom: none !important 
;
            line-height: 29px !important;
        }
    </style>
</head>

<body>
    <div style="width: 200px;height: 300px;">
        <table style=" table-layout:fixed" class="table table-bordered">
            <th width="10%">Title01</th>
            <th width="20%">Title02</th>
            <!--  其他th -->
            <c:foreach items="" var="" varStatus=""></c:foreach>
            <tr>


                <td style="overflow:hidden; white-space:nowrap">這是title01的內容</td>
                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容</td>
                <!--  other td   -->

            </tr>
            <tr>


                <td style="overflow:hidden; white-space:nowrap">這是title01的內容</td>
                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容這是title02的內容</td>
                <!--  other td   -->

            </tr>
            </c:foreach>
        </table>
    </div>
</body>
<!-- jQuery (Bootstrap 的 JavaScript 外掛需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的外掛 -->
<script src="js/bootstrap.min.js"></script>

</html>

bootstrap表格限制內容長度，多餘內容用省略號替代

table效果：原始碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" c

HTML怎麼讓table中的td內容過長顯示為固定長度，多餘部分用省略號代替

HTML如何讓table中的td內容過長顯示為固定長度，多餘部分用省略號代替這個問題呢，是由於我們公司測試的部門測出來的，雖然說測試的內容本身就是個BUG，不過這個也讓我學到了一個比較好的歸類於佈局的一個小技巧，就是將td標籤中過長的內容只顯示為這個td的width的長度，之後的便以省略號

table td中的內容過長，顯示為固定長度，多餘部分用省略號顯示

簡單描述：table資料過長，結果頂到下一格，影響了資料的檢視解決辦法：給table 加上style屬性另外給td加上style標籤修飾 <table class="table table-striped table-bordered table-hover

angularjs 自定義過濾器控制文字的長度，多餘字元用省略號代替

今天在工作中，碰到了一個問題，在表格當中，文字的長度太長，導致整個表格拉長了很多，當給表格中td設定固定寬度的時候就會換行，顯得頁面比較醜，所以想到了把超出表格寬度部分的文字隱藏掉。於是就想到了用自定義過濾器的辦法，濾掉多餘的文字，搜尋了一下，有大神的例子做參考

django admin 列表欄位內容顯示指定長度，超出部分以省略號替代

有時候我們在用django admin做後臺管理系統的時候，有些欄位比如說content欄位內容太長，在頁面列表上展示就不好看，所以我們要限制它的長度，多出的部分用省略號替代，可以參照如下圖中紅線圈出的方式，在models檔案中加一個欄位判斷方法，如果超出指定長度就擷取字串給

jsp頁面顯示指定文字，多餘的用...代替，滑鼠指著會顯示全部內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ellipsis</title> </he

bootstrap 表格設定列固定寬度以及內容自動換行的CSS

實現表格標題欄固定，當內容超出指定寬度出現滾動條後會破壞原有佈局，這時可以用perfect-scrollbar外掛

方法一：標題欄和內容在同一表格 1、如果在同一表格標題欄必須要加<thead></thead>標籤，內容必須要用<tbody></tbody>標籤包裹，並使兩者變成塊元素。

新增json註解解決返回資料double限定小數點後幾位長度，多餘的捨棄

1.編寫註解使用的類 import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.

迴圈遍歷相同名class，限制文字字數，多餘的文字以省略號顯示

easyui 輸入框校驗限制字型長度，以及型別。。。

文件說明：設定屬性 validtype, 可String 和array 文字： <input id="desc" class="easyui-textbox" data-options="multiline:true,validType:'length[1,60]'"

android Textview設定單行顯示，多餘的顯示省略號

singleline設定為true，則可以實現單行顯示 ellipsize則是控制省略號的位置，分別有start（開始）,middle（中間）,end（最後），marquee（跑馬燈）。程式碼展示： <TextView android:

js實現字數顯示切換效果，多餘文字用...表示

受顯示區域和顯示效果限制，過長的文字完全顯示出來顯得與頁面格格不入，那麼為了讓顯示效果與整個頁面顯得更協調，我們不得不只顯示一部分文字作為預覽。下面為文字顯示切換效果程式碼。 JS程式碼： <script> function nxw(){ debugger;

android:TextView單行顯示設定字元長度，超過後面為省略號

在 TextView 中加入： (注意：layout_width="wrap_content",寬度必須是wrap_content,為match_parent無效) android:maxEms="10" //限制位元組長度為10 andro

html設定固定寬高，多餘文字顯示省略號

<!DOCTYPE html><html> <head> <meta charset="GBK"></meta> <style type="text/css">

css 實現div內顯示兩行或三行，超出部分用省略號顯示

一、div內顯示一行，超出部分用省略號顯示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div內顯示兩行或三行，超出部分用省略號顯示 o

Android ellipsize屬性(多餘文字用省略號顯示)

TextView中可以設定一個ellipsize屬性,作用是當文字長度超過textview寬度時的顯示方式: 例如，字串”abcedfghijklmn” 的各種現實效果： android:ellipsize=”start”—–省略號顯示在開頭 “…lmn”

CSS，bootstrap表格控制當td內容過長時用省略號表示，以及在不使用bootstrap時過長也用省略號表示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <styl

制作滾動表格，表格頭不動，內容滾動

header bgcolor xhtml images mouse es2017 str www 內容有這個需求，其實也不難，就是弄兩個表格組合，結合marquue標簽就行了，代碼如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DT

寫函數，檢查傳入列表的長度，如果大於2，那麽僅保留前兩個長度的內容，並將新內容返回給調用者。

pre def code 兩個 pan bsp int style 調用 def f1(*p): for i in p: # print(i) l = len(i) if l > 2: r

bootstrap表格限制內容長度，多餘內容用省略號替代

相關推薦