Text wrapping, text ellipsis, no width center display, simulated fixed height

Personal notes

1, Word-break:break-all; Line break

2, White-space:nowrap; Overflow:hidden;  Text-overflow:ellipsis; Ellipsis

3, fixed height 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>

Fixed height 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, Unknown height width center display

(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" >
<span></span>
</div>

(2),

. box{width:800px;height:600px;border:2px Solid #000;d isplay: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></span>
</div>

Text wrapping, text ellipsis, no width center display, simulated fixed height