文字适应DIV
今天突然碰到了一个奇怪的问题 那就是对于纯数字和英文字母 文字多了会超出div 且即使是设置了height:auto overflow-y:auto 也不管用
只是在x轴上出现滚动条 不论用什么高度自适应 高度都是无法自己改变的呢...
check this http://stackoverflow.com/questions/2920114/how-to-auto-adjust-the-div-height-according-to-content-in-it
解决方法是 实际上不是div高度自适应 而是文字到div边缘自动换行
参考 http://www.blueidea.com/tech/web/2006/3469.asp
body>div.wrapper2{
width: 100px;
word-break:break-all;
overflow:auto;
}
<div class="wrapper2">aaaaaaaaaaaaaaxxxxxxxxxxxxxaaaaaaaaaxxxxxxxxxx</div>
文字适应DIV的更多相关文章
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 用CSS让文字居于div的底部
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- 设置文字在div中垂直居中,使用line-height
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- 文字超出DIV的边框
已经给div设置了高宽,但是文字还是会戳出div而不是换行 鼓捣了一下好像是因为这个原因 如果全是 aaaaaaaaaaaaaaaaaaaaa 这样的纯英文,那么测试的时候是不会换行的,因为浏览器认为 ...
随机推荐
- openStack openSource CloudComputing
<一,> ,OpenStack a few Core Compontents integration with openStack-keystone Identity service1.1 ...
- jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)
FireQuery is a Firebug extension for jQuery development jQuery Lint: enables you to automatically in ...
- js 定义类对象
//定义类 //方式一 function A_class(arg1,arg2){ this.arg1=arg1; this.arg2=arg2; ...
- android之PackageManager简单介绍
PackageManager相关 本类API是对全部基于载入信息的数据结构的封装,包含下面功能: 安装,卸载应用查询permission相关信息 查询Application相关信息(applicati ...
- 阿里云Ubuntu部署java web(2) - 配置tomcat
系统版本号:Ubuntu12.04 64位 安装: 首先要安装java(測试时使用的版本号是6b27-1.12.6-1ubuntu0.12.04.2).版本号可自行选择,但不同版本号配置方法可能不同. ...
- H5 应用程序返回button的js代码设计,设计仿stack
history.back(); 该代码具有天然的缺陷,二手知道,于H5应用,尤其是模仿移动应用程序时,,这是不够. 在放大期js为了实现类似特征,请轻喷. 不多说,上代码: /** * Created ...
- HDU1200:To and Fro
Problem Description Mo and Larry have devised a way of encrypting messages. They first decide secret ...
- 如何上传base64编码图片到七牛云
接口说明 POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Cr ...
- VC++ 编译过程
一 前言 一开始编译C++代码的时候可能会对编译的错误觉得很难理解,搞不清楚究竟是哪里错了.了解编译过程,能够更好的处理编译错误. 二 名词解释 编译单元:当一个c或cpp文件在编译时,预处理器首先递 ...
- 10247 - Complete Tree Labeling(递推高精度)
Problem B Complete Tree Labeling! Input: standard input Output: standard output Time Limit: 45 secon ...