web-dev-qa-db-ja.com

CSSの画面サイズに応じて（フォントサイズではなく）テキストを変更する方法

小さい画面サイズで曜日の略語を使いたい。
たとえば、画面が縮小されたときに'Saturday'を'Sat'に変更したいとします。
これどうやってするの？

javascriptcssmedia-queries
16
Ahmet AY

フルストリングとショートストリングの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をターゲット解像度のブレークポイントに置き換えます。

CSSメディアクエリの詳細

27
George Kagan

::afterを使用した例。スクリーンリーダーなどからアクセスできるかどうかはわかりません。

「全ページ」を押し、500px未満にサイズ変更して実際の動作を確認してください。

このアプローチの利点は次のとおりです。

  • すべてのコンテンツはcssではなくhtmlファイルにあります
  • I think日のラベルのみを非表示にし、コンテンツを削除しないことで、アクセシビリティの問題を回避できる
@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>
9
user3297291

これには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関数を使用し、必要に応じて誰かまたは両方を使用しました。

3
Neeraj Rathod

これもできます。ただし、これにより画面サイズに基づいてコンテンツが切り取られることに注意してください。しかし、特定の文字を切り取りたくない場合は、これが目的の文字ではない可能性があります。

コンテンツを切り取るには、次のようにします。

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ピクセルの画面サイズに調整されますが、オーバーフローは省略記号（...）に変更されます。また、テキストオーバーフローをクリップに設定することもできます。そうすると、省略記号は表示されません。クリップします。これは、記事のスニペットを表示していて、サンプルディスプレイにテキスト全体を表示したくない場合に役立ちます。

これが誰かを助けることを願っています。乾杯！！

0
Michgolden Ukeje