長い文章を可変で複数行...対応

[justcallmehide]

1行の...は3行css書けば終わるんですが、複数行になると話が少し違ってきます。様々なやり方がありますが、scssでやる方法いいですね。(SEO上たぶん認識されるし) http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

[c-tmn]

情報ありがとうございます。これ、昔、死ぬほど悩んだ記憶があります。しかし、pure cssっていうのは、プログラムができる人にとってもメリットなんですか？ 自分はプログラムに関わりたくないので、なんでもかんでもピュアなのを探し回っていた、という。

[justcallmehide]

@cybersprouttomoni

自分はプログラムに関わりたくない

プログラム自体は別に私も好きではないですが、 プログラムでしか学べない、考え方とか概念ってのがあってそれを理解するのが楽しいです。

プログラムができる人にとってもメリットなんですか？

コピペで済むんならそれに越したことはないって感じでしょうか？ブラウザの実装なんてロジカルじゃないので、僕はコピペで終わるなら、pure cssなのかプログラムなのか関係なくそれを使います(スピードとか対して変わらないなら)。どーせ5年後には意味のない知識ですし。

正直コーディングにはうんざりしてるので、なるべくコーディングしないように、 今vue.jsとかreact.jsとかで楽できるように勉強中です。次回はそれでやります。仮装domを持つので高速ですし。

[justcallmehide]

そういえば作ったパーシャルを載せておきます。

/* mixin for multiline */
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    bottom: 0;
    content: '...';
    position: absolute;
    right: 6px;
    background-color: white;
    width: 13px;
  }
}

呼ぶ

.multiline-ellipsis {
  @include multiLineEllipsis($lineHeight: 1.4em, $lineCount: 2);
}

[justcallmehide]

CSS text truncation is very simple to implement and is very performant since we are not editing the HTML content of the text, only its render. While single-line text truncation is well supported in older browsers, multi-line text truncation is only supported on newer browsers.

https://caniuse.com/#feat=css-line-clamp IE以外はいける、IEもういっか。

-webkit-line-clampってプロパティ。

https://coliss.com/articles/build-websites/operation/css/css-line-clamp-property.html https://codepen.io/AdrianBece/pen/JjPKZOw

[justcallmehide]

これ最初に書いたのもう2年前か...

responsiveで書けるバージョンを編み出した。 コツはこのwidth:calc(100% - 1rem) これでレスポンシブかつ一文字...に変更できる。

.text {
  display: inline-block;
  text-overflow: ellipsis;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  width: calc(100% - 1rem);
}