我得到了這個，但我不知道為什么當我在手機上打開它時“去哪里”被分成 2 行。但是當我打開 Chrome 開發者工具時，即使頁面的最小寬度也可以。
/*Column*/
.header {
background-color: #fff;
color: #000;
box-shadow: 0 0 15px rgb(0 0 0 / 55%);
width: fit-content;
margin-left: auto;
margin-right: auto;
}
#column {
background-color: #fff;
color: #000;
text-align: center;
display: table-cell;
width: 33%;
max-width: 50%;
}
.columnNad {
color: #ff6347;
font-weight: bold;
}
.columnText {
color: #000;
}
<div class="header">Where to</div>
<div id="column">
<div class="columnNad">TEST</div>
<div class="columnText">Test123Test123Test123Test123Test123Test123Test123Test123<br><br></div>
</div>
謝謝
uj5u.com熱心網友回復：
添加white-space: nowrap;到.header.
.header {
background-color: #fff;
color: #000;
width: fit-content;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
}
#column {
background-color: #fff;
color: #000;
text-align: center;
display: table-cell;
width: 33%;
max-width: 50%;
}
.columnNad {
color: #ff6347;
font-weight: bold;
}
.columnText {
color: #000;
}<div class="header">Where to</div>
<div id="column">
<div class="columnNad">TEST</div>
<div class="columnText">Test123Test123Test123Test123Test123Test123Test123Test123<br><br></div>
</div>uj5u.com熱心網友回復：
您可以width: fit-content; margin-left: auto; margin-right: auto;從標題中洗掉并添加text-align: center;如下：
.header {
background-color: #fff;
color: #000;
text-align: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453259.html
下一篇：用css撰寫時背景影像不出現