文字数数えるだけでいいよってときはこれ。
"あいうえおかきくけこさしすせそ”.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;/縦幅を指定すれば
}