简述网站一般建设的流程,上海地区网站开发公司,wordpress教材.txt,国外的网站建设文字[行内块]与行内[块]垂直对齐方式 文字[行内块]与行内[块]垂直对齐方式概述图片底部空隙问题 文字溢出显示省略号单行文字多行文字 文字[行内块]与行内[块]垂直对齐方式
概述
vertical-align: top | middle| bottom | baseline(默认) | sub | sup… 文字[行内块]与行内[块]垂直对齐方式 文字[行内块]与行内[块]垂直对齐方式概述图片底部空隙问题 文字溢出显示省略号单行文字多行文字 文字[行内块]与行内[块]垂直对齐方式
概述
vertical-align: top | middle| bottom | baseline(默认) | sub | supertop : 文字[行内块]顶部对齐图片顶部 bottom 文字[行内块]底部对齐图片底部 middle文字[行内块]中线对齐图片中线 baseline文字[行内块]**基线拼音线的中间那一条**对齐图片底部 sub文字[行内块]下表对齐图片底部 super文字[行内块]上标对齐图片顶部
如果没有这个属性需要手动将文字[行内块]垂直居中与行内块对齐
图片底部空隙问题
图片底部默认会有一个空白的缝隙这是由于图片默认对齐基线导致的
我们可以手动设置图片对齐方式即可只要不是基线对齐都可以消除空白或者将图片转为 块级元素因为块级元素是没有基线对齐这个特点的也可以消除空白缝隙
文字溢出显示省略号
单行文字
盒子设置宽度不指定宽度时默认最大宽度为父盒子宽度盒子设置不换行盒子上设置 溢出隐藏盒子上设置 文字溢出显示省略号
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;
}
