Html 在CSS中使不同样式的文本具有相同的宽度

我想知道是否有一种方法可以使html元素中包含相同的文本，但不同的样式占用相同的空间，而不给它固定的宽度

我所说的一点点

我希望两个div具有相同的宽度，尽管样式略有不同。文本可以更改，因此我不能为div指定固定的宽度，也不能使用固定的填充或边距来实现这一点。有什么想法吗

HTML:

div {
    padding:5px;
    display:inline-block;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

.foo {
    display: inline-block;
}
.foo div {
    padding:5px;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

Lorem ipsum door sit amet.

Lorem ipsum dolor sit amet。

CSS:

div {
    padding:5px;
    display:inline-block;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

.foo {
    display: inline-block;
}
.foo div {
    padding:5px;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

编辑：

---

这两个不同样式的div在应用程序中不会相邻。它们是同一个div，我只是希望当应用不同的样式时，div的大小不会改变。这里有一个更好的例子：

使用

display:inline block

将它们包装在

div

中，并从子

div

中删除

display:inline block

HTML:

div {
    padding:5px;
    display:inline-block;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

.foo {
    display: inline-block;
}
.foo div {
    padding:5px;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。

CSS:

div {
    padding:5px;
    display:inline-block;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

.foo {
    display: inline-block;
}
.foo div {
    padding:5px;
    border:1px solid black;
    background-color:lightgray;
}

.normal {
    font-weight:bolder;
}

.disabled {
    font-weight:lighter;
    font-style:italic;
    color:#666666;
}

---

对不起，我应该说得更具体一点。这两个不同样式的div在应用程序中不会相邻。它们是同一个div，我只是希望当应用不同的样式时，div的大小不会改变。如果它们位于完全不同的位置，CSS中的任何内容都无法帮助您。您需要使用JavaScript。