css实现盒尺寸重置、均匀分布的子元素、截断文本

56次阅读

共计 980 个字符,预计需要花费 3 分钟才能阅读完成。

盒尺寸重置
重置盒子模型,以便 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 %,仅适用于单个行元素。

正文完
 0