H5 溢出隐藏和缩略图和清除浮动

最新推荐文章于 2023-10-07 11:37:33 发布
最新推荐文章于 2023-10-07 11:37:33 发布
阅读量654 收藏
点赞数
分类专栏： 境-H5 文章标签： H5 溢出隐藏 缩略图 清除浮动 小技巧 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>新建H5模板</title>
<style>
/*共用样式*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}  
body{ font-family:\5FAE\8F6F\96C5\9ED1,'Arial'; color:#999; font-size:12px; background:#fff;}  
a{ color:#3f3f3f; text-decoration:none;}  
a:hover{ color:#cc0000; text-decoration:underline;}  
a img{ border:none;}  
.fl{ float:left;}  
.fr{ float:right;} 

/*溢出文本显示省略号*/
.line-nowrap{
	overflow: hidden;  
	white-space: nowrap;  
	text-overflow: ellipsis;  
}

/*适合PC端和手机端的图片*/
.thumbnail{
	display: inline-block;
	height: auto;
	max-width: 100%;
}

/*清除浮动*/
.clearfix:before,.clearfix:after {content:"";display:table}
.clearfix:after {clear:both}
.clearfix { *zoom:1}/*IE/7/6*/
</style>
</head>
<body>
<!--溢出文本显示省略号-->
<p style="width: 100px; border: 1px solid #666; margin: 20px auto;" class="line-nowrap"><a href="###">阅谁问君诵，水落清香浮。</a></p>
<!--适合PC端和手机端的图片-->
<p style="max-width: 600px; margin: 20px auto;"><img src="demo.png" class="thumbnail"></p>
<!--清除浮动-->
<div style="background: #000; height: 580px; width: 680px; margin: 20px auto;">
	<div class="fl" style="background: #f60; height: 400px; width: 330px;"></div>
	<div class="fr" style="background: #60f; height: 400px; width: 330px;"></div>
	<div class="clearfix"></div>
	<div style="background: #f06; height: 140px; width: 100%; margin-top: 20px;"></div>
</div>
</body>
</html>

效果图：

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6258
h5(html5)+css3+移动端前端 知识点详细总结
尚优选项目
m0_69167751的博客
10-26 1074
解决所有的高度塌陷问题,让overflow: hidden让他变成一个公共的,在css中创建文件夹mixins写成一个混合函数，在css的less中调用。a标签两个元素中仅有一个要设置颜色,使用&引用当前元素(a)里面的first-child{}他的第一个孩子。margin: 0(上下方向为0) auto(左右为auto);清除两侧浮动,让他显示出来内容为空。先引入公共文件,再引入自己所写的。favicon.ico图标。index.html主页。css中的less调用。images图片目录。
HTML5水波荡漾动画特效 非常逼真
08-23
在现实生活中，我们经常可以看到水波的效果，雨滴落到小河中，河里必定泛起了水波。今天我们用HTML5模拟了水波荡漾效果，点击河水的图片，即可从点击处开始泛起水波，并向远处伸展。这个利用HTML5模拟出来的水波效果非常逼真，不过有点耗CPU。
h5显示两行文字，溢出的隐藏
weixin_60591474的博客
08-09 629
h5显示两行文字，溢出的隐藏
html中表格内容超出后如何隐藏?
weixin_42835515的博客
10-17 5570
html中表格内容超出后如何隐藏? table{ width: 300px; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ table-layout:fixed; } td{ border: 1px solid black; /*超出部分隐藏*/ overflow: hidden; /* 强制在同一行内显示所有文...
HTML5新增API FileReader 显示缩略图
趟过java，遇见web
08-01 864
【代码】HTML5新增API FileReader 显示缩略图。
HTML5隐藏图片代码,HTML5终极备忘大全（图片版+文字版）
weixin_39603469的博客
06-03 198
一、前言兼图片备忘下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化，因为图片较高，故滚动显示)。但是，上面毕竟是图片格式(原图上兆)，而且还是英文的，所以自己觉得有必要将上面的内容文字化，同时做下简单的中文翻译。整理一番，于是就有下面的些内容。二、文字备忘之标签HTML5中新增的标签...
⑨品优购项目
LINZHONG21的博客
10-26 1108
1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 ●项目名称:品优购 ●项目描述:品优购是一个电商网站,我们要完成PC端首页、列表页、注册页面的制作 1.3品优购项目的学习目的 电商类网站比较综合,里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。 品优购项目能复习、总结、提高基础班所学布局技术。 写完品优购项目,能对实际开发中制作PC端页面流程有一个整体的感知。 为后期学习移动端项目做铺垫。 1.4开发工具以及技术栈 1.开发工具 VScode、Photoshop(fw)、
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
H5的拖放事件(拖拽删除)
weixin_30470643的博客
07-03 466
今天我们来介绍一下h5的拖放事件： 拖放事件 H5的拖放事件提供了多个接口： 1、drag：当元素或者选中的文本被拖动时触发（每几百毫秒触发一次），应用在被拖拽元素上 2、dragend：当拖动操作结束时触发（通过释放鼠标按钮或者点击转义键），应用在被拖拽元素上 3、dragenter：当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发，应用在目标元素上 4、...
H5+Css3文本溢出添加省略号（包括插件）
最新发布
qq_34082921的博客
10-07 1771
webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp。因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。将height设置为line-height的整数倍，防止超出的文字露出。：文本需要使用p标签或div标签，span不行。
html超出部分显示隐藏,CSS文字超出部分隐藏并显示省略号
weixin_31759829的博客
06-03 4245
下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。网站前端开发中 web 网页中文字超出了需要隐藏，并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，实现这个效果有两种解决方法，大致如下：一是用程序开截取字符长度，这个其实也是可以的，但是并不利于 SEO 优化，因为搜索引擎得到的也只是截取的长度第二种是用 css 样式来做,这种...
H5设置文字显示一行，超出部分显示为省略号
a872822645的博客
08-13 4908
效果图： 代码如下： <head> <meta charset="utf-8"> <title>测试</title> <style> div{ width:100px; background:#00ff00; white-space:nowrap; over...
HTML5 元素超出部分滚动, 并隐藏滚动条
weixin_30566149的博客
05-15 2215
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超出部分隐藏滚动条</title> </head>...
HTML设置超出规定显示范围的内容隐藏
m0_52813455的博客
05-06 1951
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/ overflow: hidden; /*超出长度的文字隐藏*/
css强制换行和超出部分隐藏实现
yyjourney的博客
01-25 1万+
字段过长，页面显示效果： 一、强制换行 1 word-break: break-all; 只对英文起作用，以字母作为换行依据。 2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 3 white-space: pre-wrap; 只对中文起作用，强制换行。 word-break:break-all 和 word-wrap:break-word
html设置超出自动隐藏,css如何设置超出部分隐藏
weixin_34320235的博客
06-01 6017
CSS 一段文本怎么设置超过省略号显示单行文本实现方法： 实现效果： 多行文本溢出显示省略号实现方法： 实现效果： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 扩展资料： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。在标签中，想要实现文字超出就隐藏，CSS怎么写？需要准备的材料分别有：电脑、浏览器、html编辑器。首先，...
微信h5下载图片和视频
05-24
在微信H5中下载图片和视频可以通过以下步骤实现： 1. 长按要下载的图片或视频，选择“识别图中二维码”或“识别视频中的二维码”。 2. 如果图片或视频中有二维码，微信会自动识别并弹出下载链接。如果没有二维码，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值