.hoge{
background: #eee;
height: 100px;
/* overflow: scroll;*/
overflow: hidden;
width: 100px;
}
.hoge+.hoge{
margin-top: 10px;
}
.tategaki {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
これはテストです。
jQuery(function($){
});
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(1000);
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')) {
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();
【js】テキストが親要素をはみ出ていたらリサイズして親要素内に収める方法
2020/07/01