nach unten statt außerhalb des Div
Hallo, ich habe ein Problem mit meinem Kartenschieberegler. Das Tag bewegt sich ständig außerhalb des Bereichs, aber ich möchte, dass es nach unten rutscht, damit es in die lange Beschreibung passt. Der gesamte Text , wie mache ich das?
Wenn Sie sehen, dass bei der Verwendung von Langtext der Text außerhalb des Trennzeichens landet, ich aber möchte, dass er innerhalb bleibt
Ich habe versucht, word-wrap: break-word; zu verwenden, aber es hat bei mir nicht funktioniert
div.scroll-container { Hintergrundfarbe: #7289da; Leerraum: nowrap; Polsterung: 10px; overflow-x: scrollen; overflow-y: versteckt; -webkit-overflow-scrolling: touch; } .card { float: keine; Anzeige: Inline-Block; Zoom: 1; Polsterung: 10px; Breite: 375px; Höhe: 525px; } .container { Polsterung: 2px 16px; Hintergrundfarbe: #fff; Farbe: #000; Höhe: 200px; } .container p { Farbe: #000; Schriftgröße: 20px; } 
John Doe
Architekt & Ingenieurjifnnjknhbgvfdfcgvhbjnkmmnbgvfd
John Doe
Architekt und Ingenieur
John Doe
Architekt und Ingenieur
John Doe
Architekt und Ingenieur
这是因为您在
.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; }