css - CSS3 で長いリンクをトリミングするには?

Question

長いリンクをトリミングする場合、文字列の長さをチェックしたり、長すぎる場合は省略記号を追加したりするなど、サーバー側で余分な作業を行う必要がありますが、CSS3 だけで簡単に行うことができます。

Answer 1

これを行う方法の答えは次のとおりです。

/* Only links with "href" attribute */
a[href] {
    /* Add ellipsis at the end if text does not fit in given width */
    text-overflow: ellipsis;
    /* Have to add this line to make upper line work */
    overflow: hidden;
    /* Decide what is the longest link width in given units (px, em, rem etc.) */
    max-width: 300px;
    /* Element has to be inline-block to have width and fit inline in the same time */
    display: inline-block;
    /* We want to have all the link in one line without wrapping */
    white-space: nowrap;
}