对于宽度不确定的元素，进行文字省略

让一个元素垂直居中是我们开发经常遇到的问题,下述整理各种情况: div垂直居中 场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中. <style> #content { width: 200px; height: 200px; border: 1px dashed #333; } #content div{ width: 50px; height: 50px; border: 1px solid #f00; } </style> <di

最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的son他的宽度远远的超出了我们父级的宽度,那么问题是怎么引起的呢? <div class="fathor" style="width:1024px"> <div class="son" style="position:fix

<style> .div{ position: relative; width: 100%; height: 30px; background: #ffff00}        .div b{ display: block; height: 0; border-bottom: 1px dashed #ff0000; width:100%}        .f1{ float: left; position: relative; left: 50%}        .f1 span{ float

方法一:将border改成outline outline是不占据父级空间的 .chess { width : 50px; height: 50px; outline: 2px solid lightgray; display: flex; justify-content: center; align-items: center; cursor: pointer; } 方法二: 将盒子设置成border-box .chess { width : 50px; height: 50px; border

在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: 1 <div class="container"> 2 <div class="box"> 3 <div class="box-content"> 4 <h5 class=&q

加上CSS * { text-overflow:ellipsis; overflow:hidden; } 如果标签还设置了word-break:break-all;的类似的属性 那还需要加上white-space:nowrap;属性来去除换行,在有换行设置的情况下,我们的text-overflow:ellipsis;是不会生效的.

只需要三行的代码就可以实现这样的效果: overflow:hidden; text-overflow:ellipsis; white-space:nowrap;   //在一行显示,直到遇到一个<br />

white-space: nowrap; 这个属性表示规定段落中的文本不进行换行: 在项目中font-size:0.6rem; text-overflow: ellipsis;(超出行用省略号...表示) 这样设置,查看box中的height发现高度是17px而不超出行宽,height高度18px这样导致 float:left 向左浮动不能对齐 所以这里做了一个解决办法设置 min-height值

基本隐藏方案 我们经常会遇到一个场景:对于一些显示标签,如果超出部分就隐藏,基本样式如下 white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 允许换行,超过2行再换行 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; 原文地址:https://www.c