Ellipsis mixin for SCSS



    SASS/SCSS Starter Kit

    This mixin will style text as if it has been truncated by an ellipsis symbol. The text will overflow the element's bounds if it is not hidden, and white-space will be preserved.

    Shortcut: scss.mixin.ellipsis

    @mixin ellipsis($numOfLines: 1) {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      @supports (-webkit-line-clamp: $numOfLines) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: $numOfLines;
        -webkit-box-orient: vertical;
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    • Security
    • Privacy Policy
    • Code Privacy
    • Terms of Service
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.