CSS溢位文字隱藏

2021-10-03 12:24:55 字數 1851 閱讀 4100

所謂的介面樣式, 就是更改一些使用者操作樣式, 比如 更改使用者的滑鼠樣式, 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制,因此我們就放棄了。 防止表單域拖拽

設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

cursor

:default 小白| pointer 小手| move 移動| text 文字

最常用的四種:

是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

outline

: outline-color ||outline-style || outline-width

但是我們都不關心可以設定多少,我們平時都是去掉的。

最直接的寫法是 : outline: 0; 或者 outline: none;

resize:none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。

右下角可以拖拽:

右下角不可以拖拽:

帶有寬度的塊級元素居中對齊,是margin: 0 auto;

讓文字居中對齊,是 text-align: center;

vertical-align 垂直對齊

設定或檢索物件內容的垂直對其方式。

vertical-align 不影響塊級元素中的內容對齊,它只針對於 行內元素或者行內塊元素,特別是行內塊元素

通常用來控制/表單與文字的對齊

或者表單等行內塊元素,他的底線會和父級盒子的基線對齊。這樣會造成乙個問題,就是底側會有乙個空白縫隙。

解決的方法就是:

給img vertical-align:middle | top等等。 讓不要和基線對齊。

給img 新增 display:block; 轉換為塊級元素就不會存在問題了。

normal 使用瀏覽器預設的換行規則。

break-all 允許在單詞內換行。

keep-all 只能在半形空格或連字元處換行。

text-overflow : clip | ellipsis

設定或檢索是否使用乙個省略標記(…)標示物件內文字的溢位

clip :  不顯示省略標記(…),而是簡單的裁切

ellipsis :  當物件內文字溢位時顯示省略標記(…)

css 溢位文字顯示省略標記隱藏

在網頁上我們經常看到如下圖的文字省略的顯示方式,那麼是如何做到這種效果的呢?要想解決這個問題,我們先要了解文字溢位隱藏。normal 使用瀏覽器預設的換行規則。break all 允許在單詞內換行。keep all 只能在半形空格或連字元處換行。主要處理英文單詞 white space設定或檢索物件...

css超出文字隱藏

首先,要知道css的三條屬性。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 這三個是css的基礎屬性,需要記得。但是第三條屬性,只能顯示一行,不能用在這裡,那麼如果顯示多行呢?css3...

單行溢位隱藏沒生效 css實現文字溢位隱藏

css實現文字溢位顯示省略號 在做響應式網頁的時候,我們要想在不同尺寸的裝置下保證布局不會錯亂,就需要對文字的長度進行限定。基礎設定 在介紹下面的方法之前,我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box width 100px height 100px border 1px soli...