CSS:如何在inline-block元素前避免换行?

Question

这是我的代码:

div {
font-size: 130px;
display: inline-block;
}
div span {
display: inline-block;
font-size: 30px;
transform: translateY(-70px);
}

<div>My Text<span>&nbsp;2021</span></div>

如果窗口大小变小，则2021可能单独在一行中。但是这条线不应该像这样断，只有在My之后。所以应该是这样的:My<possible break>Text<never a break>&nbsp;2021.

怎么可能编码呢?是否有比使用white-space容器更容易的方法?

如果我使用inline而不是inline-block，它通常工作，但不幸的是，这个translateY是不可能的。

Answer 1

设置span的宽度为0，并给容器添加一些内边距

div {
font-size: 130px;
display: inline-block;
padding-right: 65px; /* here */
}
div span {
display: inline-block;
width: 0; /* here */
font-size: 30px;
transform: translateY(-70px);
}

<div>My Text<span>&nbsp;2021</span></div>

Answer 2

您可以使用position:relative和position:absolute的组合，并使用top,left,right,bottom或transform:translate变体对span的位置进行更细粒度的控制，任何适合您的

我已经使用translateY来获得所需的结果:-

div {
display:inline-block;
font-size: 130px;
position:relative;
}
div span {
position:absolute;
font-size: 30px;
transform:translateY(50%);
}

<div>My Text<span>&nbsp;2021</span></div>