html - 包含相同数量字符的行根据屏幕尺寸表现不同

Question

使用 bootstrap 4 我正在开发一个网站，我注意到包含相同数量字符的不同字符串的行为各不相同，我想知道为什么以及是否有解决办法。
一图胜千言，截图如下:

这是我使用的代码:

<div class="form-group row justify-content-center">
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Sat. December 1</b>
        <p class="form-date-french">Sam. 1 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Sun. December 2</b>
        <p class="form-date-french">Dim. 2 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Mon. December 3</b>
        <p class="form-date-french">Lun. 3 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Tue. December 4</b>
        <p class="form-date-french">Mar. 4 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Wed. December 5</b>
        <p class="form-date-french">Mer. 5 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Thu. December 6</b>
        <p class="form-date-french">Jeu. 6 Décembre</p>
    </div>
</div>

这里是自定义 CSS 类:

.form-check-date{
text-align: center;
}
.form-date-english{
color: #676767;
font-size: 0.8em;
}
.form-date-french{
color: black;
font-size: 0.7em;
}

非常感谢您的帮助

Answer 1

看起来是因为 M 和 W 比其他字母宽一点。

一个选择是接受它——这是文本自然流动的方式，而且看起来不会破损。

或者，如果您真的希望不同的日期同时换行，您可以尝试用不间断空格替换日期和月份之间的空格 ( ) ，或将它们包含在 span 中，并使用 white-space: no-wrap。