実装されたスクリーン

コード#コード#

CSS
ウィンドウが縮小してもタイトルは2行にしたい.この機能を実装するには、次のコードを使用します.
-webkit-line-clamp: 2;やればいい
webkit-line-clamp MDNでは、より詳細な使用方法が見られます.

width: 600px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

/* Video info */
.info {
  padding: var(--padding);
}

.info .metadata .hashtags {
  display: flex;
  font-size: var(--font-small);
  color: var(--blue-color);
}

.info .metadata .hashtags li {
  margin-right: var(--padding);
}

.info .metadata .titleAndButton {
  display: flex;
}

.info .metadata .titleAndButton .title{
  font-size: var(--font-medium);
  width: 600px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-right: var(--padding);
}

.info .metadata .titleAndButton .moreBtn {
  height: 100%;
}

.info .view {
  font-size: var(--font-small);
  color: var(--grey-dark-color);
}