2. 程式人生 > >CSS 超出部分顯示省略號

CSS 超出部分顯示省略號

阿新 • • 發佈：2018-12-31

單行超出顯示省略號

直接看程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>desktop demo</title>
  <style>
    .app {
      width: 400px;
      height: 28px;
      line-height: 28px;
      margin: 50px 0 0 50px;
      border: 1px solid red;
      white-space
 
: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="app">
    <span class="content">你問我為何時常沉默，有的人無話可說，有的話無人可說.你問我為何時常沉默，有的人無話可說，有的話無人可說.</span>
  </div>
</body>
</html>

效果圖：

關鍵點：

white-space:
 
 nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行超出顯示省略號

直接看程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>desktop demo</title>
  <style>
    .content {
      display: -webkit-box;
      width: 400px;
      line-height: 1.5;
 

      margin: 50px 0 0 50px;
      border: 1px solid red;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  </style>
</head>
<body>
  <div class="app">
    <span class="content">你問我為何時常沉默，有的人無話可說，有的話無人可說.你問我為何時常沉默，有的人無話可說，有的話無人可說.
    </span>
  </div>
</body>
</html>

效果圖：
在這裡插入圖片描述

關鍵點：

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

---------------------------(正文完)------------------------------------
一個前端的學習交流群，想進來面基的，可以點選這個logoVue學習交流，或者手動search群號：685486827

寫在最後：約定優於配置-------軟體開發的簡約原則.
--------------------------------(完)--------------------------------------

更多學習資源請關注我的新浪微博…

相關推薦

css 超出部分顯示省略號 彙總

單行： 加寬度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;   多行： display: -webkit-box; -webkit-box-orient:&n

CSS 超出部分顯示省略號

單行超出顯示省略號 直接看程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

css 控制文字超出部分顯示省略號

splay aqi 屬性 技術 優化 溢出 webkit none 子元素 該文章轉自：http://www.daqianduan.com/6179.html 如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要

CSS控制文字只顯示一行，超出部分顯示省略號

pac 方式 也有 瀏覽器 註解 參考 布局 多人 ellipsis <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">

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

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

table表格超出部分顯示省略號

out pac ext rap 如果 IT table psi auto 做table表格時，某一列字數比較多，希望超出寬度的部分以省略號顯示 設置table的布局 默認automatic 以表格內容顯示相應寬度 改成fixed 以表格列寬顯示內容 table{ ta

JS控制文字只顯示兩行，超出部分顯示省略號

簡單記錄便於後續的工作和學習。 由於使用css控制文字只顯示多行，超出部分顯示省略號，存在一定的相容性問題，所以總結了一下網上一些大咖使用js實現控制行數的解決方案。 第一步：依次引入jquery.js+jquery.ellipsis.js+jquery.ellipsis.unobtrusive.js。

html文字超出部分顯示省略號（偶爾失效）

之前每次寫文字超出顯示省略號的樣式都是在網上百度的  這次也是  但效果沒有達到預期的那樣（就是失敗了。。。。） 這是我百度到的程式碼 <title>文字超過兩行或三行就顯示省略號<

使用js控制文本超出部分顯示省略號

substr bstr brush pre lse turn clas str bst js代碼 // 字數限制30字,超出不顯示 fontNumber (date) { const length = date.length if (length >

css限制顯示字數，文字長度超出部分用省略號表示【轉】

class over nbsp text pac ips csdn div width 為了保證頁面的整潔美觀，在很多的時候，我們常需要隱藏超出長度的文字。這在列表條目，題目，名稱等地方常用到。 (1).文字超出一行，省略超出部分，顯示‘...‘ 如果這種情況比較多，可以取

常用css樣式（文字超出部分用省略號顯示、滑鼠經過圖片放大、出現陰影）

文字超出部分用省略號顯示： white-space: nowrap; /* 不換行 */ overflow: hidden; /* 超出部分不顯示 */ text-overflow: ellipsis; /* 超出部分顯示為... */ 滑鼠經過圖片放大 .team-img img{ width:188

常用css樣式（文字超出部分用省略號顯示、鼠標經過圖片放大、出現陰影）

eight code ado 部分 -m ans nsf 超出 nowrap 文字超出部分用省略號顯示： white-space: nowrap; /* 不換行 */ overflow: hidden; /* 超出部分不顯示 */ text-overflow: ellips

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

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

css超出部分省略號顯示

單行： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 兩行超出： width:100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-l

CSS 超出的文字...省略號顯示

單行操作：先看程式碼（display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;）分別是什麼意思： text-overflow:ellipsis;表示文字超出用省略號代替 white-space:now

css文本強制兩行超出就顯示省略號

ont color ref 需要 隱藏 csdn log 12px pan 1. 強制一行的情況很簡單 overflow:hidden;　　　　 //超出的隱藏 text-overflow:ellipsis;　　//省略號 white-space:nowrap;　　//強制

css設定文字多餘部分顯示省略號

如果只顯示一行，則可以使用以下方法： 　　overflow: hidden; 　　text-overflow:ellipsis; 　　white-space: nowrap; 如果需要顯示多行，在需要設定的元素style中新增以下程式碼： 　　word-break: brea

css文字超出隱藏顯示省略號

p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">     如果實現單行文字的溢位顯示省略號同學們應該都知道用text-overflow:ellip

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

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

TextView設定字型顯示個數，超出部分省略號表示， 或者設定顯示行數，超出部分按省略號顯示

<TextView    android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wra