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. 关于静态注册BroadcastReceiver接收不到广播的问题

    1.背景&解决方法 最近碰到一个需求,app监听特定的广播,接收到广播后启动自己再进行处理.需求很简单,静态注册就好,不过,在自测的时候遇到一个问题,app安装后没启动过的状态下,什么广播都收 ...

  2. Oracle数据库升级注意事项

    1 备份配置参数 数据库升级前的配置参数要备份,如PGA大小 这样数据库升级后还可以升级前的配置,而不至于使用安装升级时的默认配置 2 检查版本兼容 确认数据库升级后是否对生产环境上的代码有影响,如果 ...

  3. Altium Designer快速调整丝印

    Altium Designer快速调整丝印 今天我为大家讲的内容是altium designer快速调整丝印,这是我们做完PCB设计布线完成后的下一个步,很多朋友都是非常熟悉的.但是我们很多人只会用a ...

  4. Java辅助类持续汇总~

    /** * 01 * 描述:List<String>集合去除重复数据 * [时间 2019年3月5日下午3:54:09 作者 陶攀峰] */ public static List<S ...

  5. Ambari 常用的 REST API 介绍

    源码文档路径:ambari\ambari-server\docs\api\v1 swagger风格api文档:https://www.cnblogs.com/felixzh/p/10694724.ht ...

  6. SpringBoot整合RabbitMQ-整合演示

    本系列是学习SpringBoot整合RabbitMQ的练手,包含服务安装,RabbitMQ整合SpringBoot2.x,消息可靠性投递实现等三篇博客. 学习路径:https://www.imooc. ...

  7. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

  8. Spring：（一）入门基础学习

    前述 因为前几日刚刚学完Spring的基础,因此写一篇博客整理一下相关的基础知识. 什么是Spring? Spring 是一个轻量级的 DI / IoC 和 AOP 容器的开源框架,帮助分离项目组件之 ...

  9. Java中实现多线程的四种方式

    Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Cal ...

  10. 浅谈SpringMVC执行过程

    通过深入分析Spring源码,我们知道Spring框架包括大致六大模块, 如Web模块,数据库访问技术模块,面向切面模块,基础设施模块,核心容器模块和模块, 其中,在Spring框架的Web模块中,又 ...