【js】テキストが親要素をはみ出ていたらリサイズして親要素内に収める方法

親要素の高さと幅を変更せず、どんなテキストだろうがいい感じに治めたかったときの備忘録

親要素からテキストがはみ出たらはみ出ないようにするコード

ほぼ、参考記事のまま
解説がなかったので、自分なりに調べた備忘録

<style>
.hoge{
  overflow: hidden;/* 重要 */
}
.tategaki {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
</style>

<div class="hoge">…</div>
<div class="hoge tategaki">…</div>

<script>
jQuery.fn.extend({
  isProtrudeWidth: function(){
    var orgScrollLeft = this.scrollLeft();
    this.scrollLeft(0);
    this.scrollLeft(1);
    var result = (this.scrollLeft() > 0);
    this.scrollLeft(orgScrollLeft);
    return result;
  },
  isProtrudeHeight: function(){
    var orgScrollTop = this.scrollTop();
    this.scrollTop(0);
    this.scrollTop(1);
    var result = (this.scrollTop() > 0);
    this.scrollTop(orgScrollTop);
    return result;
  },
  compressionFontSize: function () {
    this.each(function () {
      $this = $(this);
      var fontSize = parseInt($this.css('fontSize')); //要素の文字サイズ取得
      // 参考コードに追加　ここから
      if ($this.hasClass('tategaki')) {
        $this.css({background:"red"})
        while ($this.isProtrudeWidth() && fontSize >= 0) {
          $this.css('fontSize', --fontSize + 'px');
        }
      } else {
        while ($this.isProtrudeHeight() && fontSize >= 0) {
          $this.css('fontSize', --fontSize + 'px');
        }
      }
      // 参考コードに追加　ここまで
    });
    return this;
  }
});

$("div").compressionFontSize();
</script>

横書きと縦書きは.css('writing-mode')で縦書きの記述がcssにあるかどうかで条件分岐させようとしたらhorizontal-tbってブラウザの初期値で横書きにする指定があったり、ブラウザごとに縦書きの指定方法が違うからclassで条件分岐している

以下より解説

解説1

var orgScrollLeft = this.scrollLeft();
this.scrollLeft(0);
this.scrollLeft(1);
var result = (this.scrollLeft() > 0);
this.scrollLeft(orgScrollLeft);
return result;

最初に現在のスクロール位置をorgScrollLeftに保存してscrollLeft(1)で要素を1px分動かす
この時に要素がはみ出ていれば動くけど要素がはみ出ていないと動かない
※親要素にoverflowをかけていると、要素がはみ出るとスクロールの判定ができるようになるみたい

それから(this.scrollLeft() > 0)で判別(true/false)
※はみ出ていればtrue

最後にスクロールの位置を最初に保存していた位置に戻す

解説2

ちょっと気になったので調べた

$this.css('fontSize', --fontSize + 'px');

--fontSizeのマイナスが二つ頭についているけど、処理としては1ずつ加算するi++に似た処理で1ずつ減算しているみたい

ただ、実行のタイミングが異なるみたいで
例えばi=0の時に
i++だと「0」から加算し始めて
++iだと既に加算された状態の「1」から始まるとのこと

個人的なメモ：jQuery.fn.extendとは

jQuery.fn.extendを初めて見たんだけどプラグインを作成するときとかに使ったりするみたい
インスタンスだのprototypeを参照するとか書かれているけどよくわからない