css 垂直居中,指定文本宽度换行,指定高度出滚动条
!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#container {
width: 400px;
height: 400px;
display: table;
} #cell {
display: table-cell;
vertical-align: middle;
} #cell_bk {
display: table;
overflow-wrap: break-word;
table-layout: fixed;
width: 20px;
} .scroll {
height: 30px;
overflow-y: auto;
}
</style>
</head> <body>
<div id="container">
<div id="cell">
<div class="scroll">
<p id="cell_bk">
dfdffffffffffffffffffffffffffff
</p>
</div>
</div>
</div>
</body> </html>
css 垂直居中,指定文本宽度换行,指定高度出滚动条的更多相关文章
- java中JTextPane使输出字符到指定的宽度换行,并将垂直滚动条的位置移动到输出的最后位置
SimpleAttributeSet set = new SimpleAttributeSet(); Document doc = tp.getStyledDocument(); FontMetric ...
- MeasureString 通过文本宽度获取绘制高度
using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using S ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- css为超过一定宽度的文本内容自动加上省略号
当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后,其余的可以被截断,后面补充为省略号: 实现方式: 1.设置css样式为文本不换行: 2.位包裹文本的标签指定宽度: 3 ...
- css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- ADO 输入输出文本及获取指定字符串
---恢复内容开始--- 1.获取文本:声明别量,指定文本路径,获取文本内容. string Text=System.IO.File.ReadAllText(@"C:\xxx\xxx\xxx ...
- C#字符串操作 取文本左边 取文本右边 取文本中间 取文本中间到List集合 指定文本倒序
/// <summary> /// 取文本左边内容 /// </summary> /// <param name="str">文本</pa ...
- 转:JS在文本域鼠标指定位置插入文本-柯乐义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 数据初始化:有则更新无则添加(mySql,oracle)
数据初始化:有则更新无则添加(mySql,oracle) 2018-02-01 1 Orcale ) ),address )); -- 执行两次,会报 [Err] ORA-00001: unique ...
- webpack打包调试react并使用babel编译jsx配置方法
http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...
- python 视频处理,提取视频相关帧,读取Excel
一共这几个模块: class videoReader 读取视频 class videoFramesExtractor(videoReader):继承了读取视频,主要是用来限制读取视频中的哪些帧,并保存 ...
- RabbitMQ中各种消息类型如何处理?
一:消息类型 Map String(含json字符串类型) 二:处理方法 2.1 Map消息 如果发送的消息类型是map类型,可以通过SerializationUtils.deserialize方法将 ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 解压报错gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error is not recoverable: exiting now的解决方法
在部署tomcat的环境搞JDK的时候出现这个问题.分享一下. 解压命令:tar -zvxf memcached-1.4.34.tar.gz 遇到了一个问题, gzip: stdin: not in ...
- with open
再考虑一个场景,要读取文件内容,并把年龄和名字的顺序交换存成新文件age_name.txt,这时可以同时打开两个文件:with open('name_age.txt', 'r') as fread, ...
- Android基础——使用Fragment适应不同屏幕和分辨率
最近事情很忙,一个新项目赶着出来,但是很多功能都要重新做,一直在编写代码.Debug.今天因为一个新程序要使用Fragment来做,虽然以前也使用过Fragment,不过没有仔细研究,今天顺道写篇文章 ...
- (转载)WPF中的动画——(一)基本概念
http://www.cnblogs.com/TianFang/p/4050845.html WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计 ...
- C语言 · 猜灯谜
标题:猜灯谜 A 村的元宵节灯会上有一迷题: 请猜谜 * 请猜谜 = 请边赏灯边猜 小明想,一定是每个汉字代表一个数字,不同的汉字代表不同的数字. 请你用计算机按小明的思路算一下,然后提交“请猜谜”三 ...