码迷,mamicode.com
首页 > 其他好文 > 详细

文字单行超出时隐藏不换行并且省略号提示/字母文字缩进间隔属性

时间:2019-11-09 19:30:25      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:white   区别   word   lin   rap   pac   自动换行   上下   像素   

  1. 固定width内,文字显示不全,使用white_space:nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
  2. word-break:break-all 例如div宽400px,它的内容就会到400px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
  3. word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
  4. word-spacing:字间距对英文单词生效,中文和英文字母不生效

    letter-spacing:字间距对英文字母和中文生效

    text-indent:缩进像素,规定文本块中首行文本的缩进。

    line-height:决定上下行间隔

    .content {
      font-size: 16px;
      text-indent: 32px;
      line-height: 25px;
      letter-spacing: 1.5px;
    }

.content{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis

}

 

文字单行超出时隐藏不换行并且省略号提示/字母文字缩进间隔属性

标签:white   区别   word   lin   rap   pac   自动换行   上下   像素   

原文地址:https://www.cnblogs.com/shirleysblog/p/11827042.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!