単一行の省略:
selector{ text-overflow: ellipsis;/*这就是省略号喽*/ overflow: hidden;/*设置超过的隐藏*/ white-space: nowrap;/*设置不断行*/ width:200px;/*设置宽度*/}
ほとんどのモバイル ブラウザは Webkit カーネルを使用するため、-webkit-line-clamp 属性を使用できます。
-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。 この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。
display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するために組み合わせる必要がある属性。
-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。
selector{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;/*此为两行,设置行数*/ -webkit-box-orient: vertical;/*子元素垂直排列*/}
注: 省略記号の後に詳細を表示するリンクを追加する場合は、テキストの直後に 詳細を表示 を追加します。