Html 是否有一种纯CSS的方法来检测文本是否已包装并为其提供不同的样式？

例如，我有一个按钮，上面有一个长文本：

[有关详细信息，请单击此按钮]

由于文本很长，在一些小屏幕上，它会被包装

[请单击此按钮查看详细信息] [更多资料]

我想使

文本在包装时对齐为
左
，而在未包装时对齐为
居中

例如：



有什么纯CSS解决方案吗？
没有通用的方法仅使用CSS将不同样式应用于不同宽度的元素。这是一件非常好的事情，因为它很容易被破坏，如下面的示例所示（使用CSS媒体查询形式的伪代码）

CSS
使用纯CSS的唯一方法是找到在两行上呈现按钮文本的窗口宽度，并为该宽度编写媒体查询。例如，如果您测试页面，发现当页面大小为500px或更小时，按钮被压扁，因此文本呈现在两行上，您可以添加样式：

.button {
    text-align: center;
}
@media( max-width: 500px ) {
    .button {
        text-align: left;
    }
}

当然，文本在两行上呈现的确切点可能因浏览器/布局引擎而异

JavaScript
使用JavaScript，您可以在页面加载和调整页面大小时测试每个按钮的高度。如果在按钮只有一行文本时知道按钮的高度，并且按钮的高度大于该高度，则可以对这些按钮应用不同的样式

例如：


函数按钮样式（）{
let buttons=document.queryselectoral（'button'））
用于（让按钮中的按钮）{
如果（按钮离视>40）{
button.classList.add（'left'）
}否则{
button.classList.remove（'left'）
}
}
}
window.addEventListener（'load'，按钮样式）
window.addEventListener（'resize'，按钮样式）
按钮{
宽度：300px；
显示：块；
文本对齐：居中；
利润率：10px；
字体大小：15px；
线高：15px；
填充物：5px；
}
按钮，左边{
文本对齐：左对齐；
}
一行
两行
媒体查询可能是处理这个问题的最好方法，因为它很短，所以我把它放在这里：@Media（max width:650px）{.button{text align:center}。只需调整按钮响应的目标最大宽度。纯css。。。。不，如果您必须使用JavaScript，有没有办法做到这一点？Thanks@AGamePlayer您可以计算文本的高度，并确定是否有换行符，但在我看来，这远远超出了它的价值。@AGamePlayer用JavaScript解决方案更新了答案
.button {
    text-align: center;
}
@media( max-width: 500px ) {
    .button {
        text-align: left;
    }
}