在CSS中,對于文字放在盒子里有很多不同的屬性。下面將介紹其中比較常用的三種:
div{ width: 200px; //設(shè)定盒子寬度 height: 100px; //設(shè)定盒子高度 border: 1px solid black; //設(shè)定盒子邊框 background-color: #eee; //設(shè)定盒子背景顏色 padding: 10px; //設(shè)定盒子內(nèi)邊距 margin: 10px; //設(shè)定盒子外邊距 text-align: center; //設(shè)定文字水平居中 line-height: 100px;//設(shè)定文字垂直居中 }
1. 文字換行
如果文字過長,不希望它超出盒子邊界而破壞頁面布局,可以使用word-wrap: break-word;
屬性。
div{ word-wrap: break-word; //讓文字自動換行 }
2. 文字溢出隱藏
如果文字過多,可以使用text-overflow: ellipsis;
屬性。當(dāng)然,還需要結(jié)合white-space: nowrap;
和overflow: hidden;
屬性才能實現(xiàn)。
div{ white-space: nowrap; //不讓文字換行 overflow: hidden; //隱藏超出盒子范圍的內(nèi)容 text-overflow: ellipsis; //以省略號(...)表示溢出的文字 }
3. 設(shè)置文字大小
如果想設(shè)置文字的大小,可以使用font-size: 16px;
屬性實現(xiàn)。
div{ font-size: 16px; //設(shè)置文字大小為16px }
以上是對CSS中文字放在盒子里的一些基本屬性介紹,通過這些屬性的組合可以實現(xiàn)更加個性化的文字樣式。