CSS 中强制不换行和居中不并存的解决方案

当我们需要同时实现强制不换行和居中时，一般书写HTML和CSS如下：

<div>Lorem ipsum dolor sit amet.</div>

div {
    width: 100px;

    background-color: #CCC;

    text-align: center;
    white-space: nowrap;
}

效果如下图所示，居中不起作用：

查过 StackOverflow 之后得到解决方案如下：

<div><p>Lorem ipsum dolor sit amet.</p></div>

div {
    width: 100px;

    background-color: #CCC;

    text-align: center;
    white-space: nowrap;
}

p {
    display: inline-block;

    width: 1000px;
    margin: 0 -500px;
}

效果如下：

并存问题解决。