文章/答案/技术大牛

发布

社区首页 >问答首页 >使用text-align:right截断倾斜字体

问使用text-align:right截断倾斜字体
EN

Stack Overflow用户

提问于 2014-11-28 03:52:01

回答 1查看 1.6K关注 0票数 2

如果你有这些大的“倾斜的”字体(不确定术语)，你的不透明度小于1，并且你使用的是text -align:对，文本的结尾将被截断。我还发现在Safari的OSX版本中，即使不透明度为1，结尾也不会渲染。在其他任何地方，似乎只有不透明度< 1时才会出现这种情况。这似乎只有在文本向右对齐时才会发生。

我已经在jsfiddle中重现了这个问题：

http://jsfiddle.net/qcr62eoa/

代码：

<head>
    <title>Test</title>
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
    <style>
        .box {
            background-color: lightblue;
            width: 500px;
            font-family: 'Playball', cursive;
            text-align: right;
            padding-right:30px;
        }
        .box h1 {
            opacity: 0.5;
            font-size:48px;
            font-weight:400;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Hello world</h1>
    </div>
</body>

fonts

text-align

html

css

回答 1

Stack Overflow用户

发布于 2014-11-28 05:18:38

我不知道您是否在寻找解决方法或解释，这确实很奇怪，没有答案，但有解决方法可用:)。您可以在"box h1“中添加一些填充。

我测试了一下，它起作用了。

<head>
    <title>Test</title>
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
    <style>
        .box {
            background-color: lightblue;
            width: 500px;
            font-family: 'Playball', cursive;
            text-align: right;
            padding-right:30px;
        }
        .box h1 {
            opacity: 0.5;
            padding-right:10px;
            font-size:48px;
            font-weight:400;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Hello world</h1>
    </div>
</body>

希望这能有所帮助

干杯

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27177900

复制

相似问题

问使用text-align:right截断倾斜字体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用text-align:right截断倾斜字体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用text-align:right截断倾斜字体
EN