CSS 文字溢出

2024-04-15 12:55:04 391

示例

该text-overflow属性处理应如何向用户发送溢出内容的信号。在此示例中，ellipsis表示剪切的文本。

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

不幸的是，text-overflow:ellipsis仅适用于一行文本。没有办法在标准CSS的最后一行支持省略号，但是可以通过非标准的仅基于Webkit的flexbox实现来实现。

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

示例（在Chrome或Safari中打开）：

http://jsfiddle.net/csYjC/1131/

资源：

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

CSS 文字溢出

示例

热门推荐

随机推荐