32.html的文字屬性
阿新 • • 發佈：2021-05-01
文章目錄
HTML的文字屬性
文字的垂直和水平居中
文字的水平對齊（text-align）
text-align：文字的水平對齊，可選值：
- left 左側對齊（預設）
- right 右側對齊
- center 居中對齊
- justify 兩端對齊
因為較為簡單，這裡不做過多介紹，直接貼程式碼：
<!DOCTYPE html>
<html lang="en">
<head 顯示：
### 文字的垂直對齊（vertical-align）
vertical-align:設定元素垂直對齊方式，可選值：
- baseline：基線對齊（預設值，基線其實就相當於英語那種作業本上面為了讓英文字母顯得更好看的水平線）
- top：頂部對齊
- bottom：底部對齊
- middle：居中對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< 顯示：
如果是top，bottom和middle，顯示分別如下：
知識點：對於圖片插入後留了一絲空隙的現象，我們可以在圖片中通過新增樣式vertical-align:top來消除多出來的那一行空隙。
其他的文字樣式
text-decoration（設定文字修飾）
text-decoration可選值（一個引數）：
- none 什麼都沒有
- underline 下劃線
- line-through 刪除線
- overline 上劃線
可以有第二個引數設定顏色（線的顏色），IE不相容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style>
.box{
font-size: 20px;
text-decoration: underline #bbffaa;
}
</style>
</head>
<body>
<div class="box">
Today is sunny!
</div>
</body>
</html>
white-space(設定網頁如何處理空白)
white-space,可選值：
- normal 正常
- nowrap 不換行
- pre 保留空白
這裡介紹一下限制文字固定長度，多餘的用省略號表示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style>
.box{
font-size: 20px;
text-decoration: underline #bbffaa;
}
/*以下四個屬性，缺一不可*/
.text-box{
/*設定寬度*/
width: 300px;
/*設定不換行*/
white-space: nowrap;
/*設定超出的部分隱藏*/
overflow: hidden;
/*設定超出的文字顯示省略號*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="text-box">
Not only politeness but also an attitude of reverence is demanded in church. If one is not familiar with the service, he may maintain a respectful silence, standing when others stand, sitting when they sit, and bowing during prayer. On entering a church an usher will probably show you to a seat and it is polite to take the one indicated by him, though it is quite proper to whisper a suggestion that one does not want to sit too far to the front, or that one is a little deaf and would like to sit well forward.
</div>
<div class="box">
Today is sunny!
</div>
</body>
</html>
顯示：
