怎么用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实现盒尺寸重置、均匀分布的子元素、截断文本”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！