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届,绝大多数的页面间布局都是水 ...
随机推荐
- Cannot set the value of read-only property 'outputFile' for ApkVariantOutputImpl_Decorated{...
转载请标明出处:https://www.cnblogs.com/tangZH/p/10764568.html 在做多渠道打包的时候出现了这个错误,在高版本的gradle出现. 具体错误为:Cannot ...
- Windows Server 2016-Powershell加域并指定OU (二)
上章节提到通过netdom join加域并指定对应OU,本章再补充一例现成powershell加域并指定对应OU的脚本,便于大家工作中使用. $PlainPassword = P@ssw0rd $Us ...
- apache kafka & CDH kafka源码编译
Apache kafka编译 前言 github网站kafka项目的README.md有关于kafka源码编译的说明 github地址:https://github.com/apache/kafka ...
- Linux 桌面玩家指南：04. Linux 桌面系统字体配置要略
特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...
- javascript 字符串转换数字的方法大总结
方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有 ...
- JNI实战（四）：C 调用 Java
在前面我们讲了一下如何使用Java调用C,本文我们讲一下如何使用JNI提供的接口来反射得到Java方法进行调用. 主要步骤如下: FindClass (找到Java层的类) GetMethodID / ...
- #Java学习之路——基础阶段二（第二篇）
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- HttpUtil 【判断网络连接的封装类】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 该封装类主要包括以下功能: 判断是否有网络连接.判断是否有可用的网络连接: 判断是否是3G网络.判断mobile网络是否可用: 判断 ...
- Django学习笔记（2）——模型，后台管理和视图的学习
一:Web投票示例 本节我们首先从全局范围再复习一下Django的概念,让自己对Django的设计理念, 功能模块,体系架构,基本用法有初步的印象. Django初始的详细博客内容:请点击我 该应用包 ...
- keil教程之新建软件工程
前言 工欲善其事,必先利其器.要学好52单片机,就要会用keil写程序.不然,谈何学习单片机.下面介绍keil的使用. keil简介 Keil C51是美国Keil Software公司出品的51系列 ...