小さい画面サイズで曜日の略語を使いたい。
たとえば、画面が縮小されたときに'Saturday'を'Sat'に変更したいとします。
これどうやってするの?
フルストリングとショートストリングの2つのスパンを用意し、ターゲットの解像度を下回ったときに、メディアクエリを使用してスパンを交換します。
[〜#〜] html [〜#〜]
<span class="full-text">Saturday</span>
<span class="short-text">Sat</span>
[〜#〜] css [〜#〜]
// Hide short text by default (resolution > 1200px)
.short-text { display: none; }
// When resolution <= 1200px, hide full text and show short text
@media (max-width: 1200px) {
.short-text { display: inline-block; }
.full-text { display: none; }
}
1200pxをターゲット解像度のブレークポイントに置き換えます。
::after
を使用した例。スクリーンリーダーなどからアクセスできるかどうかはわかりません。
「全ページ」を押し、500px未満にサイズ変更して実際の動作を確認してください。
このアプローチの利点は次のとおりです。
html
ファイルにあります@media screen and (max-width: 500px) {
/* Add a pseudo element with the
text from attribute 'data-abbr' */
.day[data-abbr]::after {
content: attr(data-abbr);
}
/* Hide the original label */
.day > span { display: none; }
}
<div class="day" data-abbr="sat">
<span>Saturday</span>
</div>
<div class="day" data-abbr="Sun">
<span>Sunday</span>
</div>
これにはjqueryを使用できます
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($( window ).width() < 767){
$("p").text("Sat");
}else{
$("p").text("Saturday");
}
});
$( window ).resize(function() {
if($( window ).width() < 767){
$("p").text("Sat");
}else{
$("p").text("Saturday");
}
});
</script>
</head>
<body>
<p>Saturday</p>
</body>
</html>
ここで私は2つの関数.ready()と.resizeを配置しました。私はテストのためだけにresize関数を使用し、必要に応じて誰かまたは両方を使用しました。
これもできます。ただし、これにより画面サイズに基づいてコンテンツが切り取られることに注意してください。しかし、特定の文字を切り取りたくない場合は、これが目的の文字ではない可能性があります。
コンテンツを切り取るには、次のようにします。
HTML
<p>Saturday</p>
CSS
p {
width: 100px;
white-space: nowrap;
text-overflow: Ellipsis;
}
@media screen and only (max-width: 600px) {
p {
width: 60px;
}
}
これで、テキストは600ピクセルの画面サイズに調整されますが、オーバーフローは省略記号(...)に変更されます。また、テキストオーバーフローをクリップに設定することもできます。そうすると、省略記号は表示されません。クリップします。これは、記事のスニペットを表示していて、サンプルディスプレイにテキスト全体を表示したくない場合に役立ちます。
これが誰かを助けることを願っています。乾杯!!