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

智雲程式設計發表於2019-01-04
CSS

盒尺寸重置

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

程式碼實現：

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
複製程式碼

效果如下：

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

說明

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>
複製程式碼

效果如下：

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

說明

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>
複製程式碼

效果如下：

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

說明

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

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

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

點選：加入

相關文章