常见图文组合以及溢出隐藏

先给大家介绍几种常见的居中方式：文本垂直居中使用line-height=heght；可以实现。

写在父级，子击中行元素，行块元素文本水平居中text-align：center；

块元素相对于在父级水平居中：margin：0 auto；

还有设置文本介绍时，文字内容会超出盒子宽度，这时可以设置文本多余部分隐藏，多余的部分设置为省略号。

单行省略号：overflow：hidden；（溢出隐藏）text-overflow：ellipsis；（超出部分用省略号显示）whit-space：nowrap（不换行）

多行文字末尾显示省略号：overflow：hidden；text-overflow：ellipsis；dispaly：-webkit-box；（转换为弹性盒子，必须填写）-webkit-box-orient：vertical；（必须填写）-webkit-clamp：2；（设置第几行隐藏文字）

实现几个基础的页面图文组合布局

看到效果图，首先构思如何搭建这个模块，看到水平布局首先想到的是使用浮动。

1.一个大盒子命名为item。大盒子包括6个小盒子

2.以一个小盒子为基础发现每个小盒子里头有一个img和3个P标签即可，并且让这些文本水平居中。通过text-align：center；就能实现再让每个盒子添加浮动属性，调整上下左右边距和背景色来达到我们想要的结果

3.将每个盒子排列，在这里我们需要考虑层叠现象所/以给下面三个盒子相同的类名取消掉上边距，因为浮动后上边距与下边距会相加，出现层叠现象

常见图文组合以及溢出隐藏相关推荐

html span溢出隐藏,css实现溢出隐藏的方法
css实现溢出隐藏的方法发布时间:2021-04-09 09:45:08 来源:亿速云阅读:86 作者:小新小编给大家分享一下css实现溢出隐藏的方法,相信大部分人都还不怎么了解,因此分享这篇文 ...
css强制换行、强制不换行，溢出隐藏
css实现强制不换行/自动换行/强制换行在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧.今天我们来学习一下如何 ...
Html+css之图文组合
图文组合一.引言二.案例 1.上下布局--单图单文 2.左右布局--单图单文 3.左右布局--单图多文 4.上下布局--单图多文一.引言图文组合是页面中常见的布局,大致可以分为三类:上下排列, ...
单行溢出隐藏没生效_小Tip：关于单行/多行文本溢出隐藏的一些看法
最早的文本溢出隐藏只是简单的hidden,把看不见的都给"去掉",就像这样: 哈哈哈哈哈哈哈哈哈哈哈 .hid{ width: 100px; height: 20px; overf ...
ant Table td 溢出隐藏（省略号）
1.创建组件 components/LineWrap/index.js /*** td 溢出隐藏组件*/ import React, { PureComponent } from 'react'; ...
css实现多行文字溢出隐藏——前端小问题不定时更新
多行文字溢出隐藏,只用一个容器会出现padding部分无法隐藏,出现如下图所示的现象: 解决方法: 内部嵌套一层容器,设置overflow:hidden:即可: 具体代码如下: 转载 ...
text-overflow: ellipsis；文本溢出隐藏
text-overflow: ellipsis; 文本溢出隐藏效果图: 代码: .father{width:500px;}.words{font-size: 15px;line-height: 15 ...
多行文本溢出隐藏省略号
多行文本溢出隐藏省略号一.单行文本溢出二.多行文本溢出一.单行文本溢出 /* 单行文本溢出 */.inlines{overflow: hidden;white-space: nowrap;tex ...
CSS单行、多行文本溢出隐藏
1.单行文本溢出隐藏 .class{white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } 在这里需要注意的是overflow只能作用 ...

常见图文组合以及溢出隐藏

常见图文组合以及溢出隐藏相关推荐

最新文章

热门文章