<span id="zhmlo"></span>

\n

將鼠標移動到框內,查看效果.<\/p>\nThis is some long text that will not fit in the box<\/div>\n
\nThis is some long text that will not fit in the box<\/div>\n<\/body>\n<\/html><\/pre>

效果圖:<\/p>\n

\"text-overflow屬性怎么用\"<\/p>\n

本文參考:https:\/\/www.html.cn\/book\/css\/properties\/user-interface\/text-overflow.htm<\/a><\/p>"}

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 web前端 css教程 text-overflow屬性怎么用

text-overflow屬性怎么用

Feb 11, 2019 pm 03:43 PM
css3

text-overflow屬性用于指定當文本溢出包含它的元素時,應該發(fā)生的事情。

text-overflow屬性怎么用

CSS3? text-overflow屬性

作用:text-overflow 屬性規(guī)定當文本溢出包含元素時發(fā)生的事情。

語法:

text-overflow: clip|ellipsis|string;

clip:修剪文本。? ? ? ?

ellipsis:顯示省略符號來代表被修剪的文本。??

string:使用給定的字符串來代表被修剪的文本。? ??

注:所有主流瀏覽器都支持 text-overflow 屬性。

CSS3? text-overflow屬性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<p>將鼠標移動到框內,查看效果.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>

效果圖:

text-overflow屬性怎么用

本文參考:https://www.html.cn/book/css/properties/user-interface/text-overflow.htm

以上是text-overflow屬性怎么用的詳細內容。更多信息請關注PHP中文網其他相關文章!

本站聲明
本文內容由網友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容,請聯系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅動的應用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機

Video Face Swap

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

純CSS3怎么實現波浪效果?(代碼示例) 純CSS3怎么實現波浪效果?(代碼示例) Jun 28, 2022 pm 01:39 PM

純CSS3怎么實現波浪效果?本篇文章就來給大家介紹一下使用 SVG 和 CSS 動畫制作波浪效果的方法,希望對大家有所幫助!

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

本篇文章帶大家看看怎么使用 CSS 輕松實現高頻出現的各類奇形怪狀按鈕,希望對大家有所幫助!

css怎么隱藏元素但不占空間 css怎么隱藏元素但不占空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只需給元素添加“display:none;”樣式即可。2、利用position和top屬性設置元素絕對定位來隱藏元素,只需給元素添加“position:absolute;top:-9999px;”樣式。

css3如何實現鼠標點擊圖片放大 css3如何實現鼠標點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實現方法:1、使用“:active”選擇器選中鼠標點擊圖片的狀態(tài);2、使用transform屬性和scale()函數實現圖片放大效果,語法“img:active {transform: scale(x軸放大倍數,y軸放大倍數);}”。

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

怎么制作文字輪播與圖片輪播?大家第一想到的是不是利用js,其實利用純CSS也能實現文字輪播與圖片輪播,下面來看看實現方法,希望對大家有所幫助!

css3怎么實現花邊邊框 css3怎么實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實現花邊邊框。border-image屬性可以使用圖片來創(chuàng)建邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法“border-image: url(圖片路徑) 向內偏移值 圖像邊界寬度 outset 是否重復;”。

css3怎么設置動畫旋轉速度 css3怎么設置動畫旋轉速度 Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”屬性設置動畫旋轉速度,該屬性用于指定動畫將如何完成一個周期,設置動畫的速度曲線,語法為“元素{animation-timing-function:速度屬性值;}”。

css3線性漸變可以實現三角形嗎 css3線性漸變可以實現三角形嗎 Apr 25, 2022 pm 02:47 PM

css3線性漸變可以實現三角形;只需創(chuàng)建一個45度的線性漸變,設置漸變色為兩種固定顏色,一個是三角形的顏色,另一個為透明色即可,語法“l(fā)inear-gradient(45deg,顏色值,顏色值 50%,透明色 50%,透明色 100%)”。

See all articles