css之overflow应用
overflow应用的两个小例子：
1、单行文本出现省略号的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行文本省略号</title>
<style type="text/css">
.para {
height: 20px;
width: 200px;
/*换行*/
white-space:nowrap;
/*溢出隐藏*/
overflow:hidden;
/*末尾改为省略号*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<p class="para">
单行文本省略号单行文本省略号单行文本省略号单行文本省略号
</p>
</body>
</html>
预览结果如图
2、图片超链接时如果网速较慢，加载不了css也要连接成功的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片超链接不加载css也能链接成功</title>
<style type="text/css">
.box {
/*转换为块级元素*/
display:block;
height: 55px;
width:142px;
background:url(../Pictures/logo_small.gif) no-repeat;
/*让文字出界，超出a元素的宽度即可*/
text-indent:145px;
/*换行*/
white-space:nowrap;
/*溢出隐藏*/
overflow:hidden;
}
</style>
</head>
<body>
<a href="https://www.cnblogs.com/" class="box">博客</a>
</body>
</html>
效果预览：
css之overflow应用的更多相关文章
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- css之overflow
也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- 转：css中overflow:hidden 不起作用了吗？
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- css 溢出overflow
css 溢出overflow 当一个元素被设置为固定大小,在这个元素中的内容如果超出元素的界限,就会出现溢出的现象. 通常情况下我们可以通过overflow来控制这个属性. overflow语法定义 ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
- CSS 布局 - Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...
- 眼见为实 — CSS的overflow属性
1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
随机推荐
- SQLServer存储过程自制数据字典
相信很多小伙伴都对[数据字典]很头疼. 小编刚入职的时候,老大丢一个项目过来,就一个设计文档,数据字典木有,字段说明木有, 全部都需要靠“联系上下文”来猜.所以小伙伴门一定要养成说明字段的习惯哦. 说 ...
- NSTimer循环引用的几种解决方案
前言 在iOS中,NSTimer的使用是非常频繁的,但是NSTimer在使用中需要注意,避免循环引用的问题.之前经常这样写: - (void)setupTimer { self.timer = [NS ...
- HNOI2019 苟命记
Day0 瞎看了看博客,然后看了看wf题,看了一下午柯南剧场版... 后来发现,复习根本没用,因为我根本没学过. Day1 首先随便看了看三道题,觉得 \(T1\) 挺可做的,\(T2\) 看起来是什 ...
- ASP.NET Core 快速入门（实战篇）
上篇讲了<asp.net core在linux上的环境部署>.今天我们将做几个小玩意实战一下.用到的技术和工具有mysql.websocket.AngleSharp(爬虫html解析).n ...
- 3. [leetcode] Longest Substring Without Repeating Characters
Given a string, find the length of the longest substring without repeating characters. Examples Give ...
- 解决Ajax请求时无法重定向的问题
今天发现,当使用Ajax请求时,如果后台进行重定向到其他页面时是无法成功的,只能在浏览器地址栏输入才能够实现重定向. Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面. 需要实现的功能是, ...
- class基本使用
console.log(` 1.创建一个空对象 2.让this 指向刚刚创建好的空对象 3.执行构造函数内的代码 (为相关的属性和方法赋值) 4.返回创建好的对象`) // 1.创建一个空对象 // ...
- SUSE12SP3-Mycat(2)Schema.xml配置详解
简介 Schema.xml 作为 MyCat 中重要的配置文件之一,管理着 MyCat 的逻辑库.表.分片规则.DataNode 以及 DataSource.弄懂这些配置,是正确使用 MyCat 的前 ...
- 用ASP.NET Core 2.1 建立规范的 REST API -- HATEOAS
本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314 ...
- GC参考手册 —— GC 算法(基础篇)
本章简要介绍GC的基本原理和相关技术, 下一章节再详细讲解GC算法的具体实现.各种垃圾收集器的实现细节虽然并不相同,但总体而言,垃圾收集器都专注于两件事情: 查找所有存活对象 抛弃其他的部分,即死对象 ...