html 文本偏移,javascript – CSS变换偏移量随文本长度而变化

我已经设置了一个具有5个浮动< div>的demo,其旋转文本的长度各不相同.我想知道是否有办法让CSS类可以处理所有文本的居中,无论长度如何.目前,我必须为样式表中的每个字符长度创建一个类.这可能会变得太乱.我还注意到,当我增加或减少包装< div>的大小时,偏移被搞砸了.

我将通过jQuery将这些类添加到div中,但我仍然需要设置每个类以实现跨浏览器兼容性.

.transform3 {

-webkit-transform-origin: 65% 100%;

-moz-transform-origin: 65% 100%;

-ms-transform-origin: 65% 100%;

-o-transform-origin: 65% 100%;

transform-origin: 65% 100%;

}

.transform4 {

-webkit-transform-origin: 70% 110%;

-moz-transform-origin: 70% 110%;

-ms-transform-origin: 70% 110%;

-o-transform-origin: 70% 110%;

transform-origin: 70% 110%;

}

.transform5 {

-webkit-transform-origin: 80% 120%;

-moz-transform-origin: 80% 120%;

-ms-transform-origin: 80% 120%;

-o-transform-origin: 80% 120%;

transform-origin: 80% 120%;

}

.transform6 {

-webkit-transform-origin: 85% 136%;

-moz-transform-origin: 85% 136%;

-ms-transform-origin: 85% 136%;

-o-transform-origin: 85% 136%;

transform-origin: 85% 136%;

}

.transform7 {

-webkit-transform-origin: 90% 150%;

-moz-transform-origin: 90% 150%;

-ms-transform-origin: 90% 150%;

-o-transform-origin: 90% 150%;

transform-origin: 90% 150%;

}

注意：我设置的偏移值是眼球.

更新

虽然我希望用样式表来处理,但我相信我必须在JavaScript中计算CSS的转换.

我创建了以下demo来演示动态转换.在这个演示中,用户可以调整.v_text类的字体大小,只要文本的长度不超过.v_text_wrapper高度,文本应该在中心垂直对齐,但请注意我有调整magicOffset值.

好吧,我只是注意到这在iOS中不起作用…谢谢@Dinesh Kumar DJ

解决方法:

#output1,

#output2{

margin: 50px;

display: inline-block;

}

.rotate {

//remove this line if using js

transform: translateY(150px) rotate(-90deg);

}

.v_text_wrapper {

float: left;

width: 100px;

height: 150px;

background: #AAA;

border: solid #222 1px;

padding: 0;

margin: 0;

position: relative;

}

#output2 .v_text_wrapper {

height: 170px;

}

.v_text {

color: #444;

font-family: monospace;

font-weight: bold;

font-size: 1em;

width: 150px; //remove this line if using js

height: 100px;

transform-origin: top left;

text-align: center;

position: absolute;

display: table;

}

p {

display: table-cell;

vertical-align: middle;

}

不需要JS和动态的offseting.您可以将包含文本的所有< div>设置为与包装器相同的宽度和高度,将它们围绕左上角旋转(可以是任何角落),然后使用translateY将它们放回到包装器内(这假设包装器尺寸始终是相同和已知的价值).

编辑：我更新了笔包装盒< div>改变大小.由于< div>的旋转,它们的高度成为高度,反之亦然,因此如果包装的尺寸为100×150,那么子必须为150×100.

$('.v_text_wrapper').each(function(){

var x = $(this).css("height");

var text = $(this).children('.v_text');

text.css({"transform":"translateY("+x+") rotate(-90deg)", "width":x});

});

标签：jquery,javascript,css,transform,html

来源： https://codeday.me/bug/20190709/1407727.html