文字向下移動，而不是超出div
你好，我有一個關於我的卡片滑塊的問題，標籤一直超出了邊界，但我希望它向下滑動以適應長描述的整個文本，我該怎麼做呢？
如果你看到當我使用長文本時，文字最後會超出分隔符，但我希望它保持在內部
我嘗試使用word-wrap: break-word;，但對我來說沒有起作用
div.scroll-container { background-color: #7289da; white-space: nowrap; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .card { float: none; display: inline-block; zoom: 1; padding: 10px; width: 375px; height: 525px; } .container { padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; } 
John Doe
Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd
John Doe
Architect & Engineer
John Doe
Architect & Engineer
John Doe
Architect & Engineer
>
這是因為您在
.scrollable父元素上使用了white-space: nowrap;。如果您去掉這個設置，並在.card上設定word-break: break-word;，您的文字將正確換行。然而，這會破壞您的佈局，因為您顯然依賴
nowrap來使多個元素適應同一行。嘗試使用 flexbox 佈局。它更簡單，需要的程式碼更少。
.scroll-container { background-color: #7289da; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; /*Flexbox setup!*/ display: flex; } .card { /*float: none; display: inline-block; zoom: 1; height: 525px;*/ padding: 10px; width: 375px; /* Added */ flex-shrink: 0; word-break: break-word; } .container { padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; }CSS屬性
white-space: nowrap在div.scroll-container上防止空格換行。 Mozilla有一個關於該CSS屬性的示範demo。一個可能的修復方法是為您的
container類別明確地將其設定回normal。由於您的虛擬內容有一個相當長的單詞，它仍然會溢出。 在
container類別上使用word-wrap: break-word;也可以解決這個問題。編輯：如評論中@j08691所指出的：
這是更新部分的程式碼：
div.scroll-container { background-color: #7289da; white-space: nowrap; padding: 10px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .card { float: none; display: inline-block; zoom: 1; padding: 10px; width: 375px; height: 525px; vertical-align: top; } .container { white-space: normal; word-wrap: break-word; padding: 2px 16px; background-color: #fff; color: #000; height: 200px; } .container p { color: #000; font-size: 20px; }