Question

我有一个简单的单词自动收录器作为句子的一部分，自动收报机位于单词to旁边。目前，当城市名称改变其宽度使to跳起来时，我想知道如何保持固定，无论城市名称的大小如何，我都不是真的想要在城市名称上设置宽度，但不确定替代方案。

示例HTML

<h1>We are going<br>to <span class="ticker js-ticker"></span></h1>

Codepen是http://codepen.io/styler/pen/oXjwqp

Answer 1

如果你想让这条线居中，这是不可能的。你期望如何修复to并且整条线都集中在一起？ to应该修复什么？

您可以调整左侧的线条，也可以添加一点margin-left，使其看起来像是居中的。但它几乎总是偏向中心，特别是对于较长的城市名称。

Answer 2

您拥有的第一个选项是monospaced fonts，每个字母的宽度都是固定的。因此，只要您有固定数量的字母，就会有相同的宽度。

第二个选项是为城市名称设置一个预先确定的宽度，也可以使用周围的框来证明固定宽度的合理性。我已经完成了example的工作。

.ticker {
    position: relative;
    width: 300px;
    background-color: #444444;
    border-radius: 5px;
    border: 1px solid white;
    display: inline-block;


    span {
        display: inline-block;
    }
}

第三种选择，就像Darek Kay所说的那样，是不让文本居中。

这更像是一个设计问题而不是编程问题。对此没有明确的答案，只是根据您的偏好。

防止我的随机单词自动翻译器使我的句子跳转？

2 个答案: