CSS布局基础（十一）（文字[行内＜块＞]与行内[块]垂直对齐方式 & 文字溢出显示省略号）

文字[行内<块>]与行内[块]垂直对齐方式

概述

vertical-align: top | middle| bottom | baseline(默认) | sub | super

top : 文字[行内<块>]顶部对齐图片顶部
bottom ：文字[行内<块>]底部对齐图片底部
middle：文字[行内<块>]中线对齐图片中线
baseline：文字[行内<块>]**基线（拼音线的中间那一条）**对齐图片底部
sub：文字[行内<块>]下表对齐图片底部
super：文字[行内<块>]上标对齐图片顶部

如果没有这个属性，需要手动将文字[行内<块>]垂直居中，与行内块对齐

文本框与按钮对齐问题

文本框 后面接按钮默认也是基线和底部对齐，导致二者对不齐，也需要指定 vertical-align

图片底部空隙问题

图片底部默认会有一个空白的缝隙，这是由于图片默认对齐基线导致的

• 我们可以手动设置图片对齐方式即可，只要不是基线对齐都可以消除空白
• 或者将图片转为 块级元素，因为块级元素是没有基线对齐这个特点的，也可以消除空白缝隙

文字溢出显示省略号

单行文字

1. 盒子设置宽度，不指定宽度时，默认最大宽度为父盒子宽度
2. 盒子设置不换行
3. 盒子上设置 溢出隐藏
4. 盒子上设置 文字溢出显示省略号

div {
	width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文字

注意：多行文本的换行机制，由于英文的分词机制，如果没有空格 隔开，意味着这是一个单词，因此不会换行，而中文和其他不同语义的语言不存在此问题， 也就是说，换行不会拆开一个单词
以下CSS属性控制此行为

word-wrap: normal(默认，在断词符处换行)|break-word（忽视单词完整性，以单个字母为界限换行）;

而我们在实际使用中，实际的单词不会一直没有空格，因此通常情况下不会使用 word-warp 以及 word-break 等等属性

多行文字溢出显示省略号，虽然 -webkit-* 不是css标准属性，但实际测试下来，主流PC端浏览器能支持

overflow: 溢出盒子隐藏
text-overflow: ellipsis; 文字溢出显示省略号（实际测试下来这个不是必须的）

display: -webkit-box; 盒子以-webkit-box 显示
-webkit-line-clamp: 3; 第几行显示省略号，注意当盒子指定高度时，省略号只出现在第几行，不影响后面内容，因此，建议这种盒子要么不设置高度，由此属性决定内容总行数进而确定盒子高度；要么根据实际情况，计算合适的高度。
-webkit-box-orient: vertical; 设置内容排列方式

.over2_2{
    width: 100px;
    background-color: #9a6e3a;

    overflow: hidden;
    text-overflow: ellipsis; 
    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}