css+html 关于文本的总结(整理中)-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

css+html 关于文本的总结(整理中)

简介: 布局1:固定行数    示例文字示例文字示例文字示例文字 div{ width:100px;  overflow:hidden;} P{   overflow:hidden; display: -webkit-box; -webkit-bo...

布局1:固定行数

  

<div>
    <p>示例文字示例文字示例文字示例文字</p>
</div>
<!-- CSS代码 -->
div{
width:100px;
 overflow:hidden;
}
P{
   overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这是控制行数,此行代码必须搭配上面两行代码才起作用 */ }

  

  -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

  限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient   必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 

 

样式1:文字超出范围显示方式

  text-overflow:

  值:1. clip 修剪文本

    2. ellipsis 显示省略符号来代表被修剪的文本

    3. string 使用给定的字符串来代表被修剪的文本。

样式2:文本换行

  1. <br/>  html代码强制换行
  2. <p></p>  直接分段换行
    1.   这种方式的缺点是p标签会有margin和padding
  3. 给父级设置宽度,自动换行
    1.   这种方式对连续的数字和英文单词不起作用了
  4. css中的三种换行方式

    1. word-break:break-all
    2. word-wrap:break-word
      word- break:break-all   如果该行末端有个英文单词很长它会把单词截断
      word-wrap:break-word 区别就是它会把末尾的长单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

样式3:文本不换行

  1. white-space :nowrap; 文本不会换行,直到遇到<br/>
  2. text-overflow:   clip | ellipsis   
    1. clip  直接切除
    2. ellipsis 显示省略号(...)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章