整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。
當我們在編寫網頁代碼的時候，肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度，導致文本換行或者文本超出了界限，這時有人就會說了，讓后臺限制一下調用的文字個數不就行了嗎，但是我們在做響應式的時候由于是百分比布局，無法計算一行會顯示多少個文字，所以這并不是一個好的解決方案，我們使用css3就可以輕松的實現，而且簡單好用。
核心css語句：
1、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
2、white-space: nowrap; （設置文字在一行顯示不能換行）
3、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設置ul寬度為300，超出的文字內容讓其自動隱藏并顯示...）
我們在編寫網頁代碼時，有時候新聞列表頁中新聞簡介可能有一行或者多行，我們要如何處理這種問題，讓其超出多行后還能顯示省略號呢，不要慌，我們css還是很強大的，已經給我們提供了方法來處理這種問題了。
核心css語句：
1、-webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 為了實現該效果，它需要組合其他的WebKit屬性）
2、display: -webkit-box; （和1結合使用，將對象作為彈性伸縮盒子模型顯示 ）
3、-webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 。）
4、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
5、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設置段落p寬度為300，超出2行的文字內容讓其自動隱藏并顯示...）
好了，本篇文章就給大家說到這里，大家自己下來可以自己找例子寫一下試一試到底能不能實現我們所說的效果，以后在寫頁面的的遇到這種問題的時候直接復制使用即可。
每日金句：必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
html全稱英文是 hyper text markup language叫做超文本標記語言，html 就是用來去制作網頁的一種標記語言，它就是一種純文本格式的文件
純文本就是只能在內部去書寫文字內容，不能直接去添加圖片音頻視頻，但是我們會發現我們在網頁中呢？正常頁面中可以看到它里面添加了圖片、音頻視頻等等內容。
這是因為html它本身就與其他的文件不同，這門語言有它自己獨特的功能，那么理解一下 html 中的兩個重要概念，一個叫做 hyper text，超文本，一個叫做 markup 標記。
超文本叫做超級文本的縮寫，簡單一點說呢？超文本就是用來去鏈接另外一個文本或者多媒體內容的文本，也就是說超文本還是文本，不過比普通的文本有了一個特殊的功能，它可以去鏈接到另外一個內容，這個內容可以是另外一個文本，也可以是一個多媒體的內容；比如圖片、超鏈接、音頻、視頻程序等等，這就是超文本的概念。
那么怎么樣能讓我們的純文本去實現一個超美的功能呢？這就是html的另外一個功能，標記的作用。標記又叫做標簽，英文是 html tag，它有一個自己特殊的書寫規范，這種特殊的書寫的規范是寫給瀏覽器去看的，而不是給我們看的，它結合自己內部的普通的文字內容，可以去實現特殊的語義。
比如說我可以將一段普通的文字變成一個標題，將一個普通的文字變成一張圖片，這就是它的標記一個特點，我們在編輯器里面去進行編輯的時候，它是可以去看得到的，但是在瀏覽器中加載的過程中，又看不到標記，它只會去實現自己的功能。
標簽可以幫我們實現特殊的書寫效果，要么給我們的文字呢去添加特殊的含義，要么去添加我們新的內容進來新的圖片等等，
所以說沒有添加標記的網頁，它是一片混亂的文字堆積在一起，而添加了標記之后的網頁結構變得更加的清晰、有層次、有條理、而且還可以去添加除了文字以外的內容到網頁中了，這就是我們對 html 的初步印象。
大家在瀏覽網頁的時候，是否思考過這樣一個問題：怎樣才能制作出一個網頁呢？制作出一個網頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁，今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網頁瀏覽器，同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標題（title），也就是一個網頁的名稱
網頁標題
2、身體（body）
body的部分是整個網頁的重要內容部分，讓人一眼就瀏覽到這個網頁的內容，可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始，以結束標簽終止的元素：元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽，例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現，比如：name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例：
結果：
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式：
l 內部樣式，在HTML元素中使用“style”屬性
l 內部樣式表，在頭部<head>區域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經打開了制作網頁的大門啦~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
