au lieu de l'extérieur du div
Bonjour, j'ai un problème avec le curseur de ma carte, la balise continue de sortir des limites mais je souhaite qu'elle glisse vers le bas pour s'adapter à la longue description. L'intégralité du texte , comment je fais ça?
Si vous voyez quand j'utilise un texte long, le texte se retrouve en dehors du délimiteur, mais je veux qu'il reste à l'intérieur
J'ai essayé d'utiliser word-wrap: break-word; mais cela n'a pas fonctionné pour moi
div.scroll-container { couleur d'arrière-plan : #7289da ; espace blanc : nowrap ; remplissage : 10 px ; overflow-x : défilement ; overflow-y : caché ; -webkit-overflow-scrolling : toucher ; } .carte { flotteur : aucun ; affichage : bloc en ligne ; zoom : 1 ; remplissage : 10 px ; largeur : 375 px ; hauteur : 525px ; } .récipient { remplissage : 2px 16px ; couleur d'arrière-plan : #fff ; couleur : #000 ; hauteur : 200px ; } .conteneur p { couleur : #000 ; taille de police : 20 px ; } 
John Doe
Architecte et ingénieurnjifnnjknhbgvfdfcgvhbjnkmmnbgvfd
John Doe
Architecte et Ingénieur
John Doe
Architecte et Ingénieur
John Doe
Architecte et Ingénieur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
C'est parce que vous êtes dans
.scrollable父元素上使用了white-space: nowrap;。如果您去掉这个设置，并在.card上设置word-break: break-word;et que votre texte s'enroulera correctement.Cependant, cela cassera votre mise en page, puisque vous comptez évidemment sur
nowrappour insérer plusieurs éléments dans la même ligne.Essayez d'utiliser la disposition flexbox. C'est plus simple et nécessite moins de code.
.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; }Propriété CSS
white-space: nowrap在div.scroll-containerEmpêche les espaces de s'enrouler. Mozilla a une démodemode cette propriété CSS.Une solution possible est pour vous
container类明确地将其设置回normal.Étant donné que votre contenu factice contient un mot assez long, il débordera quand même. Ce problème peut également être résolu en
container类上使用word-wrap: break-word;.Edit : Comme l'a souligné @j08691 dans les commentaires :
Voici la partie mise à jour du code :
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; }