要件:
フロントエンド ページ レイアウトでは、テキストが多すぎるとページ レイアウトに影響を与えることがよくあります。特にモバイルページでは、画面幅が十分でない場合、段落テキストを完全に表示するとレイアウトが崩れてしまいます。したがって、画面の自由なサイズに合わせて段落テキストが表示されれば完璧です。つまり、画面が十分に大きい場合は段落テキストが完全に表示されます。部分的に楕円形で表示されます。
解決策:
CSS3 には text-overflow 属性があります。詳しくない学生は、ここをクリックして確認してください。 1 行のテキストの省略記号のオーバーフロー表示を実現するために使用されます。1 行のテキストの省略記号のオーバーフロー表示は、最新のブラウザーやモバイル端末と互換性があります。
効果は以下のとおりです:
実装方法:
<p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p>
p { width: 410px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
質問は次のとおりです: 複数行のテキストオーバーフローを実装したい場合はどうすればよいですか?楕円を表示しますか?
解決策: Webkit は、-webkit-line-clamp という属性をサポートしています。これに詳しくない学生は、ここをクリックして確認してください。このプロパティはサポートされていない WebKit プロパティであり、ドラフト CSS 仕様には含まれていません。ただし、Webkit カーネルを備えたブラウザでは使用できます。
効果は図に示すとおりです:
実装方法:
.figcaption { background: #EEE; width: 410px; height: 3em; margin: 1em; } .figcaption p { line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /*因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;*/ }
質問はまた出てきます: 他の主流ブラウザで完全な互換性を実現する方法? JSで実装する必要があるようです
解決策:
(実装原則: 要素の高さが親要素の高さより小さくなるまで、後ろから前に最後の文字を1つずつ置き換えることによって) ❤️