HTML DIV中文字自动换行 , 顶部对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>demo</title>
<style type="text/css">
.box {
position: relative;
width: 500px;
height: 300px;
border: 1px solid #FFF;
background-color: #999;
display: table;
} .wrap{
display: table-cell;
vertical-align: middle;
*position:absolute;
*top: 50%;
*left: 0;
} .content {
*position: relative;
*top: -50%;
*left: 0;
} </style>
</head>
<body>
<div>
<table>
<tr>
<!-- div中文字自动换行--->
<td><div style="word-wrap:break-word;word-break:break-all;padding-left: 5px;width: 150px;"><span>@item[0000000000000000000000000000000000000000000000000000i].Column6 </span></div></td>
</tr>
</table>
</div>
<div class="box">
<div class="wrap">
<p class="content">
我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中</a>
</p>
</div>
</div>
<div class="box"> <div class="wrap">
<p class="content">
是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
</p>
</div>
</div>
</body>
</html>
文字顶部 对齐
vertical-align: top; 在 table 中使用,
- word-wrap: break-word;
- word-break: break-all; 自动换行
HTML DIV中文字自动换行 , 顶部对齐的更多相关文章
- CSS 之 div中文字超出时自动换行
在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...
- WPF控件TextBlock中文字自动换行
原文:WPF控件TextBlock中文字自动换行 在很多的WPF项目中,往往为了追求界面的美观,需要控制控件中文字的换行显示,现对TextBlock控件换行的实现方式进行总结,希望大家多多拍砖!!! ...
- 设置div中文字超出时自动换行
一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...
- div中文字水平和垂直居中的css代码
HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...
- 多个div中的label标签对齐
这是之前的页面效果: 添加红色部门的代码后: <head> <meta name="viewport" content="width=device-wi ...
- 解决li中文字行高对齐
<div class="A_content_1"> <li>座右铭: <input class="A_ct1" type=&quo ...
- div中文字上下居中
<div class="title">Title</div> 1. 将div高度设成定值 2. 将line-height设成定值 3. 将text-alig ...
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法
最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...
随机推荐
- VScode使用简介
1.1 VSCode简介 VSCode官网:https://code.visualstudio.com/ 支持语音: 速度较快,对超大文件读写速度飞快(打开10M代码不到1s,Subline原生会卡近 ...
- N天学习一个linux命令之ss
用途 输出socket统计,无任何参数时默认显示的是已建立socket连接的列表 用法 ss [options] [ FILTER ] 常用选项 -h, --help 显示帮助信息 -V, --ver ...
- post and get
POST和GET是Web编程中的两个术语,他们是通过URI访问resource的两种方式.简单的说, GET 是把要访问的资源嵌入在URI中. 假设你在一个页面 http://www.myphone. ...
- CSDN处理问题神速，顶你，为你点32个赞！
今天10点左右发表了一篇文章,发表之后.文章状态待审核,博文首页不能显示文章,例如以下图所看到的: 于是果断给官网发了第一封Email.10点19分.CSDN给予回复,内容例如以下: 尊敬的用户您好: ...
- 深入分析JavaWeb Item38 -- 监听器(Listener)高速学习
一.监听器介绍 1.1.监听器的概念 监听器是一个专门用于对其它对象身上发生的事件或状态改变进行监听和对应处理的对象,当被监视的对象发生情况时,马上採取对应的行动.监听器事实上就是一个实现特定接口的普 ...
- Codeforces Round #281 (Div. 2) D. Vasya and Chess 博弈
D. Vasya and Chess Vasya decided to learn to play chess. Classic chess doesn't seem interesting to ...
- bzoj5441: [Ceoi2018]Cloud computing
跟着大佬做题.. 这题也是有够神仙了.观察一下性质,c很小而f是一个限制条件(然而我并不会心态爆炸) %了一发,就是把电脑和订单一起做背包,订单的c视为负而电脑的v为负,f由大到小排序做背包 #inc ...
- 【POJ 3076】 Sudoku
[题目链接] http://poj.org/problem?id=3076 [算法] 将数独问题转化为精确覆盖问题,用Dancing Links求解 [代码] #include <algorit ...
- B3109 [cqoi2013]新数独 搜索dfs
就是基于普通数独上的一点变形,然后就没什么了,普通数独就是进行一边dfs就行了. 题干: 题目描述 输入格式 输入一共15行,包含一个新数独的实例.第奇数行包含左右方向的符号(<和>),第 ...
- [APIO2008]DNA
https://zybuluo.com/ysner/note/1158123 题面 戳我 解析 我们要求出第\(r\)种方案,莫过于看其前面什么时候有\(r-1\)种方案. 于是,我们要求出每种情况的 ...