Blogger Information
Blog 19
fans 0
comment 1
visits 19541
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS实现超出部分显示省略号
TANKING的代码日志
Original
698 people have browsed it

当文字处于一个容器中,我只想显示一行或者两行,又想表达我还有更多内容的时候,那么可以通过这段CSS代码来是实现,超出部分就自动变为省略号。

显示一行,省略号

  1. /* 显示一行,省略号 */
  2. white-space: nowrap;
  3. text-overflow: ellipsis;
  4. overflow: hidden;
  5. word-break: break-all;

显示两行,省略号

  1. /* 显示两行,省略号 */
  2. text-overflow: -o-ellipsis-lastline;
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. display: -webkit-box;
  6. -webkit-line-clamp: 2;
  7. line-clamp: 2;
  8. -webkit-box-orient: vertical;
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments