IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Texte qui dépasse d'un p contenu dans une div


Sujet :

CSS

  1. #1
    Membre confirmé
    Inscrit en
    Mai 2008
    Messages
    203
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 203
    Par défaut Texte qui dépasse d'un p contenu dans une div
    Bonjour à toutes et à tous,

    Je bloque sur un petit truc...

    J'ai créé des cartes.
    Dans ces cartes, je compte par la suite injecter des données en provenance d'une table d'une BDD.

    Je vais limiter le nombre de caractères (a 150) au niveau de la base.
    Notamment pour le
    <p> dépassements à régler </p>

    Le soucis c'est que même avec si peu de caractères, ça déborde de mon p et de ma div (.n_2_caroussel_clients)...

    Des idées ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    <!DOCTYPE html>
    <html lang="fr">
     
    	<head>
    	  <meta charset="UTF-8">
    	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	  <title>carrousel</title>
     
    	  <!-- Feuille de style CSS -->
    		<link rel="stylesheet" href="style_caroussel_clients1.css"/>
     
    	 <!-- Feuille de style JS-->
    		<script src="script_caroussel_clients1.js" defer></script> 
     
     
    	</head>
     
    	<body>
     
    		<div class="caroussel_clients_body">		
     
    			<div class="n_0_caroussel_clients">	
     
    				<p id="n_0_caroussel_clients_btn_nxt_left" class="n_0_caroussel_clients_btn_pre"><</p>
     
    				<div class="n_1_caroussel_clients">	
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client </h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à reglerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 1</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 2</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 3</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 4</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 5</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 6</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 7</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 8</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    					<div class="n_2_caroussel_clients">	<!-- A CLONER ------------------------------->
     
    						<div class="n_2_caroussel_clients_image">
    							<img src="photo.jpg" alt="photo_client" draggable="false">						
    						</div>
     
    						<h2> Nom client 9</h2>
     
    						<p> Produit </p>
     
    						<p> Dépassements à regler </p>
     
    						<p> lien </p>
     
    					</div> <!-- A CLONER --------------------------------------------------------------->
     
    				</div> <!-- n_1_caroussel_clients -->
     
    				<p id="n_0_caroussel_clients_btn_nxt_right" class="n_0_caroussel_clients_btn_nxt">></p>
     
    			</div>
     
    		</div>
     
    	</body>
     
     
    </html>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    *
    {
    	box-sizing: border-box;
    	margin: 0;
    	padding; 0;
    }
     
    	.caroussel_clients_body
    	{
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		padding: 0 35px;
    		background-color: grey;
    		height: 100vh;
    	}
     
    		.n_0_caroussel_clients 
    		{
    			max-width: 1100px;
    			width: 100%;
    			position: relative;
    		}
     
    		.n_0_caroussel_clients .n_1_caroussel_clients
    		{
    			display: grid;
    			grid-auto-flow: column;
    			grid-auto-columns: calc(( 100% / 3 ) - 12px);
    			gap: 16px;
     
    			overflow-x: auto;
    			scroll-snap-type: x mandatory;
    			scroll-behavior: smooth;
    			scrollbar-width: 0;
    		}
     
    			.n_1_caroussel_clients::-webkit-scrollbar 
    			{
    			  display: none; /*Problème Firefox */
    			}
     
    		.n_0_caroussel_clients_btn_nxt, .n_0_caroussel_clients_btn_pre
    		{
    			height: 50px;
    			width: 50px;
    			background-color: #FFFFFF;
    			color: #000000;
    			font-size: 3em;
    			text-align : center;
    			border-radius: 50%;
    			line-height: 50px;
    			cursor: pointer;
     
    			position:absolute;
    			top: 50%;
    			transform: translateY(-50%);
     
    			box-shadow: 0 3px 6px #D9B436;
     
    		}
     
    		.n_0_caroussel_clients_btn_pre
    		{
    			left: -22px;
    		}
     
    		.n_0_caroussel_clients_btn_nxt
    		{
    			right: -22px;
    		}
     
     
    			.n_1_caroussel_clients :where(.n_2_caroussel_clients,.n_2_caroussel_clients_image)
    			{
    				display: flex;
    				align-items: center;
    				justify-content: center;
    			}
     
    			.n_1_caroussel_clients .n_2_caroussel_clients
    			{
    				height: 350px;
    				list-style: none;
     
    				border-radius: 10px;
    				display: flex;
    				padding-bottom: 15px;
    				align-items: center;
    				flex-direction: column;
    				justify-content: center;
     
    				background-color: #F0F0F0;
    				background-image: url(fond_site.jpg);
     
    				border: 2px solid #D9B436;
     
    				cursor: pointer;
     
    				scroll-snap-align: start;
     
    			}
     
    				.n_1_caroussel_clients.dragging .n_2_caroussel_clients
    				{
    					cursor: grab;
    					user-select: none;
    				}
     
    				.n_1_caroussel_clients.dragging
    				{
    					scroll-snap-type: none;
    					scroll-behavior: auto;
    				}
     
    				.n_1_caroussel_clients.no-transition
    				{
    					scroll-behavior: auto;
    				}
     
    				.n_2_caroussel_clients
    				{
    					width: 100%;
    					text-wrap: wrap;
    				}
     
    				.n_2_caroussel_clients .n_2_caroussel_clients_image
    				{
    					background-color: #D9B436;
    					width: 148px;
    					height: 148px;
    					border-radius: 50%;
    				}
     
    				.n_2_caroussel_clients .n_2_caroussel_clients_image img
    				{
    					width: 140px;
    					height: 140px;
    					object-fit: cover;
    					border-radius: 50%;
    					border: 4px solid #F0F0F0F0;
    				}
     
    				.n_2_caroussel_clients h2
    				{
    					font-weight: bold;
    					font-size: 1.5em;
    					margin: 30px 0 5px;
    				}
     
    				.n_2_caroussel_clients p
    				{
    					font-size: 1.2em;
    					padding-top: 10px;
    				}
     
    /*-------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------------------*/
    /*                                    Smartphone                                       */
    /*-------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------------------*/	
     
    @media screen and (max-width:1081px) 
    {
    	.n_0_caroussel_clients .n_1_caroussel_clients
    	{
    		grid-auto-columns: calc(( 100% / 2 ) - 9px);
    	}
    }
     
    @media screen and (max-width:600px) 
    {
    	.n_0_caroussel_clients .n_1_caroussel_clients
    	{
    		grid-auto-columns: 100%;
    	}
    }
    D'avance merci pour votre aide

    Question complémentaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .n_1_caroussel_clients::-webkit-scrollbar 
    			{
    			  display: none; /*Problème Firefox */
    			}
    Cela fonctionne sur brave et chrome mais pas sur firefox ... la scroll reste apparente, des idées de comment régler ce point sur firefox?

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 501
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 501
    Par défaut
    si vous voulez cacher le texte qui déborde vous pouvez utiliser overflow : hidden;.
    https://developer.mozilla.org/fr/docs/Web/CSS/overflow

  3. #3
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 232
    Par défaut
    Si tu veux afficher tout le texte sans barre de défilement y a aussi ca :
    https://developer.mozilla.org/en-US/.../CSS/text-wrap

  4. #4
    Membre confirmé
    Inscrit en
    Mai 2008
    Messages
    203
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 203
    Par défaut
    Bonjour,

    Merci à vous pour vos retours.

    Pour les commentaires, j'ai déjà placé text-wrap.
    Mais comme il est dit dans l'une de vos citations... si pas de solution c'est que le problème est mal posé.

    Poser mon problème et lire vos retours m'a fait comprendre que j'étais la tête dans le guidon...
    En fait mon problème est plutôt que si une personne s’amuse à mettre un commentaire de ce type:
    " magnifiquessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss", il y a bien 150 caractères...
    Mais comme il n'y a pas d'espace...
    Du coup, même en ayant incorporé un text-wrap, ça marche pas bien

    Je ne connais pas suffisamment toutes les subtilités du CSS pour savoir s'il existe une propriété capable de procéder automatique à de petites découpes aléatoire quand ce cas de figure se présente ?
    (Si non, je traiterai le problème avec du PHP).

    Pour la barre de défilement, j'ai utilisé ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .n_1_caroussel_clients::-webkit-scrollbar 
    			{
    			  display: none; /*Problème Firefox */
    			}
    Cela fonctionne bien sur différents navigateur, hors firefox.

    Je me demandais s'il existait une bidouille pour contourner ce point sous firefox.

    Merci pour votre aide.

  5. #5
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 232
    Par défaut
    Tu veux faire quoi avec ta deuxième demande ? Si c'est pour cacher la scrolbar, ca à déjà été donné plus haut

  6. #6
    Membre confirmé
    Inscrit en
    Mai 2008
    Messages
    203
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 203
    Par défaut
    Bonjour Gabi,

    Merci pour le word-break.
    Je ne connaissais pas celui-ci, il me sera bien utile

    Pour la scrollbar, en fait le code que j'ai écris fonctionne pour de nombreux navigateurs mais pas sur Firefox.
    Du coup, je me demandais si ce problème était connu, et s'il existait une alternative pour forcer firefox à cacher la scrollbar.

Discussions similaires

  1. Réponses: 13
    Dernier message: 08/06/2012, 17h19
  2. [MySQL] Savoir si le texte extrait de la BDD est contenu dans une variable ?
    Par cyberlp dans le forum PHP & Base de données
    Réponses: 16
    Dernier message: 18/11/2010, 14h42
  3. [AJAX] Changement de contenu dans une div.
    Par tinoudu01 dans le forum AJAX
    Réponses: 10
    Dernier message: 01/05/2009, 13h22
  4. savoir s'il existe un <a href> dans div, elle meme contenue dans une div
    Par poupouille dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/02/2008, 21h33
  5. [CSS] Décalage de contenu dans une div
    Par Onyx91 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 25/01/2006, 16h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo