怎么用css實現盒尺寸重置、均勻分布的子元素、截斷文本

本篇內容介紹了“怎么用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 %，僅適用于單個行元素。

“怎么用css實現盒尺寸重置、均勻分布的子元素、截斷文本”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！