HTML学习 实例

文本显示为单行，超过部分隐藏并使用省略号，实例:

html内文件信息

<div> 
  文本显示为单行,超过部分隐藏并使用省略号
  修改 width 属性查看效果。
</div>

CSS内文件信息

div {
  overflow:hidden;<!--超出隐藏-->
  text-overflow:ellipsis;<!--text-overflow属性仅是注解，当文本溢出时是否显示省略标记-->
  white-space:nowrap;<!--强制一行-->
  width:120px;   <!--显示宽度-->
}

使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)，实例:

HTML内信息

<div> 
  文本显示为两行,超过部分隐藏并使用省略号
  修改 width 属性查看效果。
</div>

CSS内信息

div {
  display:-webkit-box;<!--Webkit前缀-->
  text-overflow:ellipsis;<!--text-overflow属性仅是注解，当文本溢出时是否显示省略标记-->
  overflow:hidden;<!--超出隐藏-->
  width:100px;<!--显示宽度-->
  -webkit-line-clamp: 2;<!---webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.-->
  -webkit-box-orient:vertical;
}

-webkit-box-orient

在父元素设置,子元素的排列方式

vertical(垂直) horizontal(水平) inline-axis(默认值,横向排列,映射为 horizontal) block-axis(沿着块轴来排列子元素,映射为 vertical) inherit(从父元素继承 box-orient 属性的值)

不同的浏览器有不同的前缀,这里使用-webkit示例

Mozilla-----------------display:-moz-box

Webkit------------------display:-webkit-box

As specified-----------display:box