gpt4 book ai didi

javascript - 在RaphaelJS中,如何将旋转的文本对齐到底部?

转载 作者:行者123 更新时间:2023-11-28 02:39:03 24 4
gpt4 key购买 nike

使用以下代码,灵感来自this问题,我设法在 HTML 表格中添加垂直列标题,与 Internet Explorer 兼容。现在我需要设置的最后一个细节是标题垂直对齐:我希望将标题固定到行的底部。

$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});

通过这段代码,我能够得到这个结果:

Rotated Headers not aligned
(来源:ompldr.org)

如您所见,标题已旋转,但未与单元格底部对齐,我希望它们如此。我尝试使用:

vertical-align: bottom;

但这并没有改变任何事情。

并且还要在 JS 代码中的 .rotate 指令之后或之前添加此内容:

.attr({'text-anchor': 'end'});

当放置在 .rotate 指令之前时,这只会使 header 消失。当放置在 .rotate 指令之后时,我得到了更好的结果,但仍然不是我想要的,因为标题根据最后一个字符垂直对齐:

Vertical Align Attempt http://ompldr.org/vZnhiOQ

如何将这些标题对齐到第一行的底部,以获得 such结果?

谢谢

雨果

最佳答案

而不是

.attr({'text-anchor': 'end'});

在旋转之前,使用它在开始处对齐文本

.attr({'text-anchor': 'start'});

MDN docu for text-anchor

关于javascript - 在RaphaelJS中,如何将旋转的文本对齐到底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12952454/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com