CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制
1、如何让不固定元素宽高的元素垂直水平居中
.center {
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
transform: translateX(-50%) translateY(-50%);
}
flex布局写法:
.center{
display:flex;
justify-content:center
align-items:center;
}
2、禁止div复制功能
unselectable="on" onselectstart="return false;"
3、设置文字的溢出隐藏效果
td{
max-width:125px;
overflow:hidden;
white-space:nowrap !important;
text-overflow:ellipsis;
word-break: break-all;
}
CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制的更多相关文章
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- css实现不定宽高的div水平、垂直居中
一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示. 兼容方面也一样拿IE来做比较,第二种方法IE ...
- 设置text-overflow文本溢出隐藏时的对齐问题
设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧. <p> <span ...
- 不定宽高的DIV,垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...
随机推荐
- iptables学习笔记_____摘自朱双印个人日志 ____http://www.zsythink.net/
iptables为我们预先定义了四张表 raw.mangle.nat.filter filter表负责过滤:允许那些ip访问.拒绝那些ip访问.允许那些端口...是最常用的表 #查看表里面所有的规则i ...
- linux内核中链表代码分析---list.h头文件分析(二)【转】
转自:http://blog.chinaunix.net/uid-30254565-id-5637598.html linux内核中链表代码分析---list.h头文件分析(二) 16年2月28日16 ...
- camera驱动框架分析(上)【转】
转自:https://www.cnblogs.com/rongpmcu/p/7662738.html 前言 camera驱动框架涉及到的知识点比较多,特别是camera本身的接口就有很多,有些是直接连 ...
- linux暂停一个在运行中的进程【转】
转自:https://blog.csdn.net/Tim_phper/article/details/53536621 转载于: http://www.cszhi.com/20120328/linux ...
- phantomjs 下拉滚动条获取网页的全部源码
//codes.js var system = require('system'); var fs = require("fs"); //console.log('Loading ...
- Mashup
简介 mashup是糅合,是当今网络上新出现的一种网络现象,将两种以上使用公共或者私有数据库的web应用,加在一起,形成一个整合应用.一般使用源应用的API接口,或者是一些rss输出(含atom)作为 ...
- maven名词解释
Maven名词解释 Project:任何你想build的事物,Maven都可以认为它们是工程.这些工程被定义为工程对象模型(POM,Poject Object Model).一个工程可以依赖其它的工程 ...
- https协议的接口测试
用jmeter测试https接口: 和传统的http协议套路不太一样. 注意细节: 1.取样器正常选择http请求,端口号:为443(具体根据接口文档我刚开始用的80端口所以错了) 2.请求方法,一定 ...
- Initialization of bean failed; nested exception is java.lang.IllegalArgumentException: error at ::0 inconsistent binding
1.发生原因 springAOP 里面绑定参数出现错误 核对绑定参数的名称 核对 springAOP的版本 2.aop切面表达式写的有误
- 关于java中生产者消费者模式的理解
在说生产者消费者模式之前,我觉得有必要理解一下 Obj.wait(),与Obj.notify()方法.wait()方法是指在持有对象锁的线程调用此方法时,会释放对象锁,同时休眠本线程.notify() ...