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应用的更多相关文章

  1. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  2. css之overflow

    也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究 ...

  3. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  4. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  5. css 溢出overflow

    css 溢出overflow 当一个元素被设置为固定大小,在这个元素中的内容如果超出元素的界限,就会出现溢出的现象. 通常情况下我们可以通过overflow来控制这个属性. overflow语法定义 ...

  6. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  7. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...

  8. CSS 布局 - Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...

  9. 眼见为实 — CSS的overflow属性

    1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...

  10. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

随机推荐

  1. 一起学Android之Dialog

    概述 对话框(Dialog)是一个小窗口,在Android系统开发中经常会用到,它提示用户做决定或者输入一些东西,对话框并不填充屏幕,是一个模态(Modal)窗口.Dialog类是所有对话框的基类,应 ...

  2. SqlServer中用SQL语句附加数据库及修改数据库逻辑文件名

    --查询数据库逻辑文件名 USE 数据库名 SELECT FILE_NAME(1) --查询数据库逻辑文件名(日志) USE 数据库名 SELECT FILE_NAME(2) --附加数据库 sp_a ...

  3. SQLServer之附加数据库

    附加数据库注意事项 必须首先分离数据库. 尝试附加未分离的数据库将返回错误. 附加数据库时,所有数据文件(MDF 文件和 LDF 文件)都必须可用. 如果任何数据文件的路径不同于首次创建数据库或上次附 ...

  4. [ gczdac ] 20190213 开博客啦！

    测试一下! 今天开了新博客! 还自己改了下首页! 开心!!!!! 访者必阅 https://www.cnblogs.com/gczdac/ https://blog.csdn.net/qq_43540 ...

  5. vi/vim 添加或删除多行注释

    进入vi/vim编辑器,按CTRL+V进入可视化模式(VISUAL BLOCK)    移动光标上移或者下移,选中多行的开头,如下图所示   选择完毕后,按大写的的I键,此时下方会提示进入“inser ...

  6. mysql 表结构转excel表格

    最近需要写文档,由于开发模式是先开发后写文档(不想吐槽...),数据库表结构什么的都搞好了,然后写文档的时候需要贴表结构,什么字段,类型,相关说明需要一一对应起来,数据库表10多张,字段又多,手动复制 ...

  7. SUSE12SP3-Mycat(4)rule.xml配置详解

    简介 rule.xml 里面就定义了我们对表进行拆分所涉及到的规则定义.我们可以灵活的对表使用不同的分片算法, 或者对表使用相同的算法但具体的参数不同.这个文件里面主要有 tableRule 和 fu ...

  8. Linux中Mysql的简介和安装

    MySQL 简介 点击查看MySQL官方网站 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,后来被Sun公司收购,Sun公司后来又被Oracle公司收购,目前属于Oracle旗 ...

  9. Vue.js-02：第二章 - 常见的指令的使用

    一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...

  10. 解决关于：Oracle数据库 插入数据中文乱码 显示问号？？？

    问题: oracle数据库,通过接口插入的中文数据乱码,中文变成了问号??? 解决方案: 计算机=>属性=>高级系统设置=>环境变量=>新建 变量名:NLS_LANG 值:SI ...