CSS3網頁製作教程:overflow屬性超過一行顯示省略符號

來源:互聯網
上載者:User

文章簡介:overflow屬性應用-不換行,超過一行顯示省略符號.

overflow屬性-原本是ie瀏覽器獨自開發的屬性,由於在css3中被採用,得到了其他瀏覽器的支援。

指定對於盒內容納不下的內容顯示的方法。

Overflow:hidden 對於超出容納範圍的文字會被隱藏。

Overflow:scroll div元素出現固定的水平捲軸與垂直捲軸

Overflow:auto 當文字超出是根據需要才會出現水平捲軸或者垂直捲軸

Overflow:visible則顯示效果與不使用overflow屬性時一樣

Overflow-x、Overflow-y可以單獨指定水平方向上或者垂直方向上內容超出盒的容納範圍時的顯示方法。出現捲軸。

Text-overflow:設定內容在水平方向出現省略符號。(white-space:nowrap使得盒右端內容不能換行顯示。)

.text{

width:200px;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

-moz-text-overflow:ellipsis;

white-space:nowrap;

}

<div class="text">文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體文字執行個體</div>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。