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 布局。它更简单,需要的代码更少。
CSS属性
white-space: nowrap
在div.scroll-container
上防止空格换行。Mozilla有一个关于该CSS属性的演示demo。一个可能的修复方法是为您的
container
类明确地将其设置回normal
。由于您的虚拟内容有一个相当长的单词,它仍然会溢出。 在
container
类上使用word-wrap: break-word;
也可以解决这个问题。编辑:如评论中@j08691所指出的:
这是更新部分的代码: