在 css 中显示具有特殊字体和可变间距的旋转文本

发布于 2024-12-04 03:19:48 字数 407 浏览 3 评论 0 原文

我想显示一些旋转-90度的文本（比如说ABCDHFEJBF）。我将其放入跨度中并执行了操作，

display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

但随后我无法将跨度调整为自定义尺寸。我需要文本保持一定的字体大小（例如 20px），但我需要字母之间的间距根据浏览器高度增加或减少。

像这样：100％的浏览器高度，固定在页面左侧，旋转，并且字符之间的间距需要可变，因此字母之间的间距随着浏览器高度的增加而增加。

在此处输入图像描述

如果有人可以提供帮助，我们将不胜感激。

原文

I want to display some text (lets say ABCDHFEJBF) rotated -90 degrees. I put it in a span and did

display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

but then I could not resize the span to custom dimensions. I need the text to maintain a certain font size (say 20px) but I need the spacing between the letters to increase or decrease depending on the browser height.

something like this: 100% of browser height, fixed to the left of the page, rotated, and the spacing between the characters needs to be variable so the spaces between letters increase as the height of the browser increases.

enter image description here

If anyone can help that would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫瑟鸿黎 2024-12-11 03:19:48

CSS 具有letter-spacing，它允许您指定字母之间的间隙。将其设置为百分比值将使您获得所需的效果。

编辑：显然它不需要百分比值。很高兴知道，所以更有理由看看 JS 位：P

如果你愿意的话，将其与一些简单的 Javascript 结合使用可以让你更好地控制间距 - 请参阅 this fiddle 用于工作 JS 实现。

$(document).ready(function()
{
    $(window).resize(function()
    {
        var spacing = Math.floor($(this).height() / 70) + 'px';
        $('span').css('letter-spacing', spacing);
        $('#spacing').html(spacing);
    });
});

<span>Hello there</span>
<div id="spacing"></div>

CSS has letter-spacing which allows you to specify gaps between letters. Setting this to a percentage value will let you get the effect you want.

Edit: Apparently it doesn't take a percentage value. Good to know, so all the more reason to look at the JS bit :P

Using this in conjunction with some simple Javascript would give you more control over the spacing, if you want - see this fiddle for a working JS implementation.

$(document).ready(function()
{
    $(window).resize(function()
    {
        var spacing = Math.floor($(this).height() / 70) + 'px';
        $('span').css('letter-spacing', spacing);
        $('#spacing').html(spacing);
    });
});

<span>Hello there</span>
<div id="spacing"></div>

回复收藏 0 原文

小糖芽 2024-12-11 03:19:48

你想要的都可以完成......但是没有一些脚本，你需要每次设置CSS规则。像这样的

span{
    display: block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    font-size:20px;
    letter-spacing:1em;
    margin-top:200px;
    position:absolute;
    top:0;
    left:-180px;
}

注意，

我使用letter-spacing来分隔字母，并使用position将其设置在页面的一侧。需要 margin-top 才能使其显示在页面上。

示例： http://jsfiddle.net/jasongennaro/qkghV/

您也许也可以使这种动态化，但这需要大量的计算！ ;-)

What you want can be done... but without some script, you need to set the css rules each time. Something like this

span{
    display: block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    font-size:20px;
    letter-spacing:1em;
    margin-top:200px;
    position:absolute;
    top:0;
    left:-180px;
}

Note

I used letter-spacing to separate the letters and position to set it against the side of the page. margin-top was needed to make it appear on the page.

Example: http://jsfiddle.net/jasongennaro/qkghV/

You could probably make this dynamic, too, but that would take a lot of calculations!! ;-)

回复收藏 0 原文

~没有更多了~