H5 自适应正方形图片与文字溢出产生省略号

1.正方形图片：有时候前端获取到的图片大小不一样，固定宽高会变形，不固定宽高排版又会乱，所以要求图片不变形的情况下正方形展示，这样也不影响排版

代码如下：

<div><div class="image-wrapper"><img src="/assets/img/bg-middle.jpg"></div>
</div>

.image-wrapper {position: relative;width: 100%;height: 0;padding-bottom: 100%;overflow: hidden;}.image-wrapper img {position: absolute;width: 100%;height: 100%;}

2.文字溢出时省略号代替：在一些固定宽的块中因为物品名称太长又必须一行显示时可以用到，将超出块的部分隐藏并用省略号代替

代码如下

<span class="test-span">测试测试测试测试测试测试测试测试测试</span>

.test-span{width:100px;display: inline-block;border: 1px solid red;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

要实现溢出时产生省略号的效果

1、容器宽度：width；value;(px、%，都可以)

2、强制文本在一行内显示：white-space:nowrap;

3、溢出内容为隐藏：overflow:hidden;

4、溢出文本显示省略号：text-overflow:ellipsis;

效果：

H5 自适应正方形图片与文字溢出产生省略号相关推荐

qtreewidgetitem 文字内存太长换行_table文字溢出显示省略号问题
每日金句『专注做一件事』2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之 ...
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
文章目录一.分辨率分类二.视口三.Flex布局 3.1 justify-content 主轴对齐方式 3.2 align-items 侧轴的对齐方式 3.3 伸缩比 flex:value; 3. ...
table文字溢出显示省略号问题
每日金句『专注做一件事』 2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分 ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
文本溢出省略号表示的实现效果: 1.解决单行文字溢出: 解决方式: 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: n ...
css表格省略号,CSS 文本和表格中文字溢出显示省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 * ...
CSS 文字溢出显示省略号
溢出显示省略号的代码:其中 1 是行数. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-c ...
CSS 强制不换行，文字溢出显示省略号~
1. 强制不换行 white-space: nowrap; 文本强制不换行: text-overflow:ellipsis; 文本溢出显示省略号: overflow:hidden; 溢出的部分隐藏: ...
【Taro工作记录二】如何实现文字溢出出现省略号
目录前言需求解决思路: 总结结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免 ...

H5 自适应正方形图片与文字溢出产生省略号

H5 自适应正方形图片与文字溢出产生省略号相关推荐

最新文章

热门文章