设置一行超出，变省略号，用 overflow hidden 会向下偏移

最新推荐文章于 2023-04-25 16:57:37 发布
原创 最新推荐文章于 2023-04-25 16:57:37 发布 · 369 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #vue.js #javascript

本文探讨了CSS布局中inline-block元素的vertical-align属性如何影响元素的垂直对齐。通过实例解释了默认的baseline对齐方式以及如何通过设置vertical-align: bottom实现元素底部对齐，从而解决元素偏移问题。了解这一技巧对于优化页面布局至关重要。

这样设置之后，后面的两个span会向下偏移一定距离
实际上就是inline-block元素的默认baseline和其下外边沿的距离。
常用的解决方法是为上述inline-block元素添加vertical-align: bottom。

CSS3 文本效果（text-shadow，box-shadow，white-space等）文本溢出隐藏并且显示省略号
qq_48763502的博客
08-30 2511
word-break 是一个 CSS 属性，用于控制文本在换行时的行为。它影响文本如何在块级元素中断行，尤其是在长单词或连续字符无法在正常换行点断开时的处理方式。word-wrap 是 CSS 的一个早期属性，用于控制长单词或 URL 是否在需要时被强制换行，以避免超出容器的宽度。文本会在正常的换行点（例如空格或连字符）断行，不会在单词内断行。描述：多个空格会被合并为一个，但文本不会换行，会一直显示在一行内，直到容器边界。描述：保留空格和换行符，但在需要时允许文本换行以适应容器的宽度。
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
陈小峰（iefreer）的专栏
12-28 2万+
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。
关于 CSS 如何实现文字溢出隐藏时，隐藏左边而不是右边
thirteen_king13的博客
08-16 2529
通常指定一个盒子给定宽高，当文字溢出，会换行显示出来。 .box { width: 60px; height: 30px; background-color: #ff000020; } 当限制文字不换行后，会在一行超出显示出来。 .box { width: 168px; height: 30px; background-color: #ff000020; white-space: nowrap; } 添加溢出隐藏，则会自动隐藏右侧文字 .box { width: 168px;
关于文本设置overflow：hidden后引起的垂直对齐问题
weixin_45386794的博客
02-11 520
本文转载自：https://blog.csdn.net/weixin_30877181/article/details/101731141 实现图片中红框左右两部分文本垂直对齐 目前有这样的需求，一行标题中，前面为图标，后面是文字，文字要实现一行省略的效果。 首先把文字设为：display: inline-block; 然后设置省略： overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; .
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
前端开发小白9527
04-25 928
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
css 设置文字超出长度用省略号代替 + 鼠标悬停显示全文 + 行内元素向下偏移修正
Sparrowflying的博客
06-14 5365
1. css 设置文字超出长度用省略号代替，下面四个属性缺一不可width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;2.鼠标悬停显示全文title="全文全文全文全文全文全文全文";3.应用【 display:inline-block； 】后引起行内元素向下偏移添加样式：vertical-align: bott...
html一行省略号变手型,CSS第六天——定位、z-index、display、鼠标显示手型图标、固定定位盒子放大缩小都跟随版心、让内容超出隐藏 并且用省略号...
weixin_30086041的博客
06-05 124
定位　　实现堆叠效果定位模式　+　边偏移top、bottom／left、right定位属性　position静态定位：　position:static;相对定位：　position:relative;相对于自己本来的位置占位　仍在标准流中绝对定位：　position:absolute;参照：父级／祖先盒子　若无定位　则以浏览器不占位　脱离了标准流固定定位：　position:fixed;参照：屏幕...
文本超出显示省略号的方法
热门推荐
zzyaiaad的博客
04-02 4万+
设计css样式时，遇到要使文本在一行内显示，超出则加省略号的问题解决办法： 只需要使用text-overflow和white-space来使文本在一行内显示，超出则加省略号，具体操作如下所示： 1、HTML代码 <h1>遇到要使文本在一行内显示，超出则加省略号的问题解决办法，如果描述超过100像素，则会隐藏，添加省略号</h1> 2、css代码 需要加上宽度（width：...
文本溢出省略号显示时，水平位置发生偏移
weixin_33845881的博客
08-10 207
问题 经常有这样的需求，给一个定宽的div.但是里面放的内容有时候会超长，这时候就有需求，要求剩下的省略号显示啊！ 这个很简单啊 width: 100px; // 这个div宽度的定值 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 但是 会出现这样的问题 [demo](https://jsfiddle.n...
css渐变色彩 省略标记 嵌入字体 文本阴影全面了解
09-24
但仅设置`text-overflow: ellipsis`是不够的，还需要结合`overflow: hidden`和`white-space: nowrap`来限制文本在一行内显示并隐藏超出部分。例如： ```css .text-overflow { text-overflow: ellipsis; overflow: ...
css样式一行放不下省略
最新发布
09-10
- 元素必须设置了明确的宽度（width）或者最大宽度（max-width），这样才有边界，超出边界才会隐藏并显示省略号。 所以，完整的CSS样式应该是： ``` .ellipsis { white-space: nowrap; overflow: hidden; ...
CSS中overflow:hidden的三大应用场景详解
在此基础上，`overflow:hidden` 常与 `white-space: nowrap` 和 `text-overflow: ellipsis` 配合使用，实现“**单行文本溢出显示省略号**”的效果。具体实现方式为：对文本容器设置固定宽度，同时应用 `white-space:...
echarts 设置平均线，警戒线markLine属性
Teemo_shape的博客
08-06 8084
option = { title: { text: '一周水质处理量', subtext: 'm³' }, tooltip: { trigger: 'axis' }, legend: { data: ['最大水处理量', '最少水处理量'] }, toolbox: { show: true, feature: { dataZoom:.
前端实现文件的断点续传 大文件上传
Teemo_shape的博客
04-17 4347
https://www.cnblogs.com/libin-1/p/5958791.html 掘金上的详细介绍 https://juejin.im/post/5da14778f265da5bb628e590
前端-sso单点登录方案
Teemo_shape的博客
04-22 3251
定义： 单点登录就是指通过用户的一次性鉴别登陆，其他子项目在需要验证用户信息的时候，无需再做登录操作，自动识别登录。 为什么要选择单点登录：就当一个项目下有三个子项目
前端展示用户名-手机号加密特殊处理
Teemo_shape的博客
07-23 3120
1.用户只保留姓后面打星号，或者前面型号只保留最后一个字。 方法一： 利用substr 对字符串进行截取**，封装成函数 function formatName(name) { let newStr; if (name.length === 2) { newStr = name.substr(0, 1) + '*'; // 通过substr截取字符串从第0位开始截取,截取1个 } else if (name.length > 2) { // 当名字大于2位时 ..
vue 基于 iview 的 table 表格的拖拽换顺序实现。
Teemo_shape的博客
04-22 3057
需求： iview 的表单实现拖拽换位置。然后自动将整个数组传给后台。 iview 文档说明； <Table :columns="dataCardcolumns" :data="caredData" :draggable="true" @on-drag-dr...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值