30

div の幅が 300px だとすると、テキストのフォントサイズを設定して、テキストが同じ長さになることは決してないことを考慮して、常に幅の 100% になるようにするにはどうすればよいでしょうか (テキストは、php によって生成された動的なタイトルです) ）。小さいテキストは、大きいテキストよりもはるかに小さいフォントを使用する必要があります。

4

6 に答える 6

14

@svassr によって提供されたソリューションを組み合わせることでfont-size: *vw、望ましい結果が得られました。そう：

div {
  text-align: justify;
  font-size: 4.3vw;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

は のvw略でviewport width、この例ではビューポートの幅の 4.3% です。それをいじって、テキストが 1 行に収まるようにします。@svassrのソリューションと組み合わせると、これは私にとって魅力的でした！

于 2018-04-03T11:42:45.467 に答える
12

あなたが求めていることは、おそらく実行できないでしょう。text-align:justify段落テキストを右側に拡張しますが、ヘッダーのサイズを幅の 100% に調整することはできません。

編集：まあ、実際には、これを行うように見えるJSライブラリが存在します。http://fittextjs.com。それでも、純粋な CSS ソリューションは利用できません。

于 2013-07-09T00:38:00.497 に答える
3

このための Web コンポーネントを作成しました:
https://github.com/pomber/full-width-text

ここでデモを確認してください:
https://pomber.github.io/full-width-text/

使い方はこんな感じです。 

<full-width-text>Lorem Ipsum</full-width-text>
于 2016-10-29T22:16:28.310 に答える
3

font-size の代わりに css transform を使った簡単なスケール関数を用意しました。

ブログ投稿: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

コード：

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

実際のデモ: https://codepen.io/maciejkorsan/pen/BWLryj

于 2017-03-07T10:59:00.377 に答える