css實現盒尺寸重置、均勻分佈的子元素、截斷文字

盒尺寸重置

重置盒子模型，以便 width s 和 height s 並沒有受到 border  還是 padding 他們的影響 。

程式碼實現：

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

效果如下：

說明

box-sizing: border-box  新增 padding  或者 border  不影響元素的 width  或者 height  。
box-sizing: inherit  使元素尊重其父元素 box-sizing  規則。
瀏覽器支援98.4 %，沒有警告。

均勻分佈的子元素

在父元素中均勻分佈子元素。

程式碼實現：

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>
<style>
.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}
<style>

效果如下：

說明

display: flex  啟用彈性箱。
justify-content: space-between  水平均勻分佈子元素。第一個專案位於左邊緣，而最後一個專案位於右邊緣。
或者，使用 justify-content: space-around  給子元素們分配空間，而不是在他們之間。

瀏覽器支援98.1 %，需要字首才能獲得完全支援。

截斷文字

如果文字長度超過一行，它將被截斷並以省略號結束。

程式碼實現：

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
<style>
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}
<style>

效果如下：

說明

overflow: hidden  防止文字溢位其尺寸(對於塊，100 %寬度和自動高度)。
white-space: nowrap  防止文字高度超過一行。
text-overflow: ellipsis  使其在文字超出其維度時以省略號結尾。
width: 200px;  確保元素具有維度，以知道何時獲取省略號

瀏覽器支援98.4 %，僅適用於單個行元素。

這裡推薦一下我的前端學習交流群：731771211，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。

點選：