文字根据图片环绕 + 显示文字两行后省略号

首先看布局：

“拼团价” 这里是图片，标题文字要环绕，第二行文字要在图片的下面

1、正常的做法是：设置图片float，这样就可以实现；

.info-content_title{clear: both;
}
.content-title_logo{float: left;
}<view class="info-content_title"><image class="content-title_logo" src="../img/groupBooking/icom.png" mode="aspectFill"></image><text class="content-title_text">{{item.title}}</text>
</view>

PS1、这样就会跟"显示文字两行后省略号"的样式设置有冲突（文字没有在图片下方环绕）；

.content-title_text{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}

如图：

PS2、如果不设置"显示文字两行后省略号"的样式，那标题内容全部展示出来；

所以就不能用float，而是用定位

.info-content_title {position: relative;
}.content-title_logo {position: absolute;top: 3rpx;left: 0;
}.content-title_text {text-indent: 105rpx; // 首行标题的缩进display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}

文字根据图片环绕 + 显示文字两行后省略号相关推荐

html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
html图片左侧现实文字,css 关于图片上显示文字
图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute. 本文带来了一种新的实现方式:采用height为0+overflow为visible的方式 ...
HTML让文字在图片上显示的几种方法
HTML让文字在图片上显示的几种方法第一种方式是image 作为背景图片,即:background:url("......."); 例如如下代码块: <div style= ...
0005 前端 Html 04 AutoFileName 图片的显示文字链接图片链接页面内链接列表加超链接的列表
以下为学习笔记,用来备忘.交流工具:Sublime Text 3 渲染:谷歌浏览器 AutoFileName工具的安装安装过程参见添加Emmet插件参考我上面安装Emmet插件的过程,基本一样. ...
vue 制作带二维码的海报并下载。 (html2canvas转为图片不显示文字的方法)
效果图如上 1.安装依赖 npm install qrcode (生成二维码) html2canvas (截取html元素生成图片) (引入依赖) import qrcode from "q ...
python tk label 多字体_Python3 tkinter基础 Label compound 图片上显示文字 fg字体颜色 font字体大小...
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载
uniapp小程序项目中使用canvas实现本地保存海报 1.问题一,使用canvas保存到本地的图片中文字模糊解决: <canvas :style="{width:windowW+ ...
设置uitabBar中某个item只显示图片不显示文字，并且图片垂直居中
ios 开发中,如何设置 uitabbar 里面 tabbaritem 不显示文字,只显示图片,图片垂直居中? -(void)creatTabbar{DisCoverViewController *w ...
HTML 显示网页图片若无法显示图片则显示文字
<html> <body> <p> 一幅图像: <img src="http://www.w3school.com.cn/i/w3school_lo ...

文字根据图片环绕 + 显示文字两行后省略号

文字根据图片环绕 + 显示文字两行后省略号相关推荐

最新文章

热门文章