html超出部分滚动,CSS元素超出部分滚动，并隐藏滚动条

方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE

超出部分隐藏滚动条

#box {

width: 500px;

height: 300px;

overflow-x: hidden;

overflow-y: scroll;

line-height: 30px;

text-align: center;

}

#box::-webkit-scrollbar {

display: none;

}

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

方法二, 利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式

超出部分滚动条

#box {

/* 父容器设置宽度, 并超出部分不显示 */

width: 500px;

height: 300px;

overflow: hidden;

}

#box > div {

/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */

width: 517px;

height: 300px;

line-height: 30px;

text-align: center;

overflow-y: scroll;

}

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

HTML5 元素超出部分滚动, 并隐藏滚动条

方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE

css 给div添加滚动并隐藏滚动条

在html中

下面内容会单独滚动

&l ...

CSS文本超出2行就隐藏并且显示省略号

今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

css 文本超出n行就隐藏并且显示省略号

首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

css设置超出部分文档隐藏(在table标签中不好使解决方案在下)

css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...

css文本超出2行就隐藏并显示省略号

之前在网上看到过这样的代码,感觉有的时候还是挺有用的,故留个笔记. display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertica ...

css 文本超出2行就隐藏并且显示省略号

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webk ...

随机推荐

CRM/ERP 企业管理软件中常见的七种程序设计模式

管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1  RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...

JS 学习笔记--3--数据类型

1.typeof 操作符 用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函 数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...

php中的NOTICE 的错误解决方法

PHP新手NOTICE错误,特此写给那些遇到和我一样错误的朋友.   刚学习PHP,不久 最近在整留言板,刚才遇到个问题. 页面中,好多类似 Notice: in D:\wamp\www\study\ ...

Android 开发笔记 “广播组件使用”

在Activity中,注册广播的一个Demo. 总共分3步 第一步:定义一个BroadcastReceiver广播接收类: private BroadcastReceiver mBroadcastRe ...

(收藏)KMP算法的前缀next数组最通俗的解释

我们在一个母字符串中查找一个子字符串有很多方法.KMP是一种最常见的改进算法,它可以在匹配过程中失配的情况下,有效地多往后面跳几个字符,加快匹配速度. 当然我们可以看到这个算法针对的是子串有对称属性, ...

记一次使用Node.js electron打包网站的记录

具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.j ...

【Vbox】centos虚拟机安装usb网卡驱动

前面安装增强pack之后 usb设备是可以识别了,但是无法正常使用,应该是无线网卡驱动没有的原因. 查看usb设备 os:centos6.6 内核:2.6.32-504.el6.x86_64 [roo ...

饮冰三年-人工智能-linux-06 系统启动流程及安全

系统启动流程 BOIS(Basic Input/Output System)基本输入输出系统:硬件和软件之间的接口,而且是很基本的接口. grub(Grand Unified BootLoader)多 ...

BZOJ-6-2460: [BeiJing2011]元素-线性基

链接 :https://www.lydsy.com/JudgeOnline/problem.php?id=2460 思路 :线性基不唯一,所以排序 进行贪心选择,价值最大的线性基, #include& ...