LoginSignup
5

More than 5 years have passed since last update.

[rails][css]文字数揃える方法をいくつか

Posted at

文字数数えるだけでいいよってときはこれ。

"あいうえおかきくけこさしすせそ”.truncate 10

truncate: http://railsdoc.com/references/truncate

1行にしたいときは、cssでこれ。

            h3{
              //base
              text-align: center;
              font-size: 30px;

              //これ!
              white-space: nowrap;//改行禁止
              overflow: hidden;//はみ出たの隠す
              text-overflow: ellipsis;//はみ出た分「...」
            }

複数行で、かつ指定した行数を固定で表示したい場合は、cssでこれ。

    h3{
      margin: 10px;
      font-weight: bold;
      &.lineclamp {
        /* config */
        line-height: 1.5;
        height: 3em;
        background-color: #fff;
        /* config end */
        position: relative;
        padding-right: 1.5em;
        overflow: hidden;
        word-wrap: break-word;
      }
      &.lineclamp:before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        width: 1.5em;
      }
      &.lineclamp:after {
        content: "";
        position: relative;
        right: -1.5em;
        float: right;
        width: 1.5em;
        height: 100%;
        background-color: inherit;
      }
    }

もうchromeの表示だけでいいよっていうときは、cssでこれ。

            p{
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              height: 50px;/縦幅を指定すれば
            }

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5