防止我的随机单词fticker使我的句子跳来跳去

Question

我有一个简单的单词stricker作为句子的一部分，股票坐在 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

您拥有的第一个选项是使用单层字体，每个字体的宽度固定宽度。因此，只要您有固定数量的字母，您就会具有相同的宽度。

第二个选择是为城市名称具有预定的宽度，也许还有一个周围的盒子来证明固定宽度合理。我为它的外观做了一个工作的示例。

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

    span {
        display: inline-block;
    }
}

像Darek Kay所说的那样，第三个选项是不以文本为中心的。

，这比这是一个编程问题，更像是一个设计问题。没有确定的答案，仅基于您的偏好。