css溢出文字隐藏

1.防止文本域拖拽

resize:none; //防止文本域拖拽,取消拖拽后可以自行添加宽高

outline:none //取消轮廓线

css溢出文字隐藏_第1张图片       css溢出文字隐藏_第2张图片

2.行内块和文字对齐

对于div等块级元素使用 text-align:center ;使文字水平居中。

                                      margin:0 auto; 使盒子在浏览器上居中对齐

vertical-align:top | middle | baseline | bottom ; 对块级元素无效。默认为baseline,使图片和文字基线对齐

css溢出文字隐藏_第3张图片   

 可以通过修改vertical-align 修改对齐方式,如下

css溢出文字隐藏_第4张图片   css溢出文字隐藏_第5张图片

3.溢出的文字隐藏

(1). work-break : normal 浏览器默认

                               break-all  允许单词拆开显示,英文效果更明显  

css溢出文字隐藏_第6张图片      

                     keep-all   不允许单词拆开显示

(2). white-space : normal  浏览器默认的处理方式

                                    nowrap: 强制在某一行显示所有文本,直到文本结束或遇换行符号

css溢出文字隐藏_第7张图片    

(3). text-overflow: 这个属性一定要在white-space | overflow:hidden 下才有效果

                                clip : 超出部分直接裁剪,不显示

css溢出文字隐藏_第8张图片     

                                 ellipsis:超出部分用省略号代替

css溢出文字隐藏_第9张图片    

         

 

 

你可能感兴趣的:(css溢出文字隐藏)