ITPub博客

首页 > 应用开发 > Html/css > css实现盒尺寸重置、均匀分布的子元素、截断文本

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

原创 Html/css 作者:智云编程 时间:2019-01-04 19:40:40 0 删除 编辑

盒尺寸重置

重置盒子模型,以便 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前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。


点击: 加入

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2305582/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
从事前端5年,希望在贵平台分享前端技巧,知识心得

注册时间:2018-12-03

  • 博文量
    682
  • 访问量
    617702