您好,登录后才能下订单哦!
本篇内容介绍了“怎么用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实现盒尺寸重置、均匀分布的子元素、截断文本”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。