文字换行,文字省略号,无宽度大小居中显示,模拟固定高度

个人笔记

1、word-break:break-all;   换行

2、 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  省略号

3、固定高度1:html{height:100%;overflow:hidden;}
body{margin:0; height:100%;overflow:auto;}
.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}

<div class="box">
 <div class="div"></div>
</div>

固定高度2:

.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));
}

<div class="box">
 <div class="div"></div>
</div>

4、未知高度宽度居中显示

(1)、

.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}

<div class="box">
 <img src="bigptr.jpg" /><span></span>
</div>

(2)、

.box{ width:800px;height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}
span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}
img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}

<div class="box">
 <span><img src="bigptr.jpg" /></span>
</div>

时间: 2024-12-14 02:24:22

文字换行,文字省略号,无宽度大小居中显示,模拟固定高度的相关文章

css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title&

JavaScript基础 window.open(url,name,options) 弹出一个 新窗口 屏幕居中显示 获取屏幕的有效宽度

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

css如何让自适应宽度的块居中显示

<div class='footer'> <ul> <li>网站首页</li> <li>企业招聘</li> <li>联系我们</li> <li>讲师招聘</li> </ul> </div> .footer{ width: 100%; height: 100px; background: black; position: fixed; bottom: 0; text

Qt 设置窗口居中显示和窗体大小

设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include <QDesktopWidget> //....... QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以 move((desktop->width() - this->width())/2, (desktop->height() - this->height())

div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign 特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而 像<div>.<span>这样的元素是没有valign特性的,因此使用verti

图片大小不改动,根据屏幕大小自动把图片居中显示

background属性 background-image: url('../img/1_1.jpg'); <!-- 背景图片路径 --> background-repeat: no-repeat; <!-- 背景图片是否重复显示 --> background-position: center; <!-- 若背景图片小于div,则居中显示 --> background-attachment: fixed; <!-- 背景图片固定,不随scroll拖动而变动 --&

应用flexbox布局的页面在手机版chrome浏览器出现文字省略号显示异常的情况

描述: 手机端Chrome浏览器(安卓)测试文字省略号显示效果  出现不支持的情况 如图所示: 原因:文字部分的直接父元素 采用了flex布局:(flex:1);祖父元素采用了flexbox布局 解决方法: 给直接父元素 设置 overflow:hidden;

NPOI随笔——图片在单元格等比缩放且居中显示

NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary> /// 图片在单元格等比缩放居中显示 /// </summary> /// <param name="cell">单元格</param> /// <param name="value">图片二进制流</param> private void Cel

NPOI 图片在单元格等比缩放且居中显示

NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary> /// 图片在单元格等比缩放居中显示 /// </summary> /// <param name="cell">单元格</param> /// <param name="value">图片二进制流</param> private void Cel