[Résolu] Couper un texte qui dépasse d'une div - Programmation - HTML / CSS

TheFlameflo Le 29 avril 2016 à 01:21 (Édité le 25 janvier 2019 à 17:51)

Salut !
J'ai un petit problème, mon texte dépasse de ma div et de mon paragraphe.
En fait, j'ai testé de nombreuses techniques pour couper le texte, mais aucune ne marche.
Pouvez-vous m'aider ?
Voici mon code HTML :

<div class="row">
      <div class="col_4">
         <h1><?= SIGN_UP ?></h1>
         <form action="" method="POST">
            <label for="name"><?= NAME ?></label></br>
            <input id="name "class="input" name="name_f" placeholder="<?= NAME ?>" value="<?php if(isset($_POST['name_f'])){echo $_POST['name_f'];} ?>"></br>
            <label for="mail"><?= MAIL ?></label></br>
            <input id="mail "class="input" name="mail_f" placeholder="<?= MAIL ?>"  value="<?php if(isset($_POST['mail_f'])){echo $_POST['mail_f'];} ?>"></br>
            <label for="mail_conf_f"><?= MAIL_CONF ?></label></br>
            <input id="mail_conf_f" type="email" class="input" name="mail_conf_f" placeholder="<?= MAIL_CONF ?>"  value="<?php if(isset($_POST['mail_conf_f'])){echo $_POST['mail_conf_f'];} ?>"></br>
            <label for="password_f"><?= PASSWORD ?></label></br>
            <input id="password_f" type="password" class="input" name="password_f" placeholder="<?= PASSWORD ?>"></br>
            <label for="password_conf_f"><?= PASSWORD_CONF ?></label></br>
            <input id="password_conf_f" type="password" class="input" name="password_conf_f" placeholder="<?= PASSWORD_CONF ?>"></br>
            <input id="register_f" type="submit" class="input" name="register_f" placeholder="<?= SIGN_UP ?>">
         </form>
         <?php 
         if(isset($error)){echo $error;}
            ?>
         
      </div><!--
      --><div class="col_8"><p><?= SIGN_UP_TEXT; ?><p></div>
   </div>
</div>

Et mon code CSS :

.row{
    display: block;
    width: 100%;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
}
.container{
    display: inline-block;
    width: 78%;
    margin-top: 10px;
    margin-left: 1%;
    margin-right: 1%;
    float: right;
    min-height: calc(100vh - 10px);
    background-color: white;
}
.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11,
.col_12
{
    display: inline-block;
    min-height: 10px;
    padding: 10px;
    overflow-wrap: break-word;
    float: left;
}
.col_1
{
    margin-left: 1%;
    margin-right: 1%;
    width: 6.33%;
}
.col_2
{
    margin-left: 1%;
    margin-right: 1%;
    width: 14.66%;
}
.col_3{
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}
.col_4
{
    margin-left: 1%;
    margin-right: 1%;
    width: 31.33%;
}
.col_5
{
    margin-left: 1%;
    margin-right: 1%;
    width: 39.66%;
}
.col_6
{
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}
.col_7 {
    margin-left: 1%;
    margin-right: 1%;
    width: 56.33%;
}
.col_8
{
    margin-left: 1%;
    margin-right: 1%;
    width: 64.66%;
}
.col_9
{
    margin-left: 1%;
    margin-right: 1%;
    width: 73%;
}
.col_10
{
    margin-left: 1%;
    margin-right: 1%;
    width: 81.33%;
}
.col_11
{
    margin-left: 1%;
    margin-right: 1%;
    width: 89.66%;
}
.col_12
{
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;
}
.input
{
    padding: 5px;
    width: 100%;
    margin-bottom: 10px;
}
p
{
    width: 100%;
}

Merci d'avance à ceux qui m'aideront ! 😀

TheOldNoob Le 29 avril 2016 à 08:06 (Édité le 29 avril 2016 à 08:07)

Salut !
J'avous que j'ai du mal a comprendre ou tu veux en venir dans la construction de tes div.
Tu as appelé 12 elements col_1 à 12, ça sous entend que tu veux faire 12 colonnes. Mais la totalité te tes 12 colonnes fait presque 700% ... C'est pas logique pour moi 😀
Après, a la place de mettre 12 class différentes, j'aurais mis 12 id et 1 class, ça t'aurai évité de faire un

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11,.col_12

J'aurais pas utilisé d'unité vh dans ton .contenair car ça pose des problèmes d'interprétation suivant les navigateurs. Il me semble que chrome, safari et opera ne l'interprete pas.

TheFlameflo Le 29 avril 2016 à 14:00

Salut !

En fait, c'est que c'est un système de grille qui me permet d'avoir des colonnes pour bien "ranger" mon contenu.
Mais bien sûr, je ne mets pas tout d'un coup sur une page pour faire 700%, ça serait illogique.
Je les appelle par "paquet" pour que ça fasse 12.
Par exemple : 4 de col_3, 3 de col_4, 2 de col_6, 6 de col_2, etc.
Pour remplace l'unité vh (pour que ça prenne tout l'écran, aurais-tu une autre idée ?

Merci beaucoup pour ta réponse ! 😀

TheOldNoob Le 29 avril 2016 à 14:13

ça dépend 😀

Tu voulais faire quoi exactement avec

min-height: calc(100vh - 10px);

?
Parce que ça ressemble a un margin:10px; sur ta div parent.

TheFlameflo Le 29 avril 2016 à 14:19

Salut !
En fait, il dépassait un peu trop dans sa hauteur (min-height) sur le bas par rapport à la sidebar. Du coup, j'ai voulu "équilibrer" ça en enlevant 10px.

TheOldNoob Le 29 avril 2016 à 15:16

Pour que la sidebar et le contenu aient la même hauteur
CSS :

.wrapper {
    display: table;
}
.content {
    display: table-cell;
    vertical-align: top;
}
.sidebar {
    display: table-cell;
    vertical-align: top;
}

ton html du coup :

<div class="wrapper">
    <div class="sidebar">Ma sidebar</div>
    <div class="content">Mon contenu...</div>
</div>

TheFlameflo Le 29 avril 2016 à 15:19

Merci beaucoup, je vais tester ça bientôt ! 😀

Mais pour mon problème de texte qui dépasse, aurais-tu aussi une solution ? 😀

TheOldNoob Le 29 avril 2016 à 15:52

J'avoue que j'ai un peu zappé se problème... qui est le pourquoi de ton poste. Désoler 😉

C'est dans quel parti de ton code que ton texte dépasse?

TheFlameflo Le 29 avril 2016 à 16:11

Ah ah, ce n'est pas grave ! :P

Voici où ça dépasse :

<div class="col_8"><p><?= SIGN_UP_TEXT; ?><p></div>

La constante SIGN_UP_TEXT, c'est ça :
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consectetur quisquam molestiae, sapiente odio quod, optio vitae repudiandae, facere tenetur sit expedita? Quibusdam expedita assumenda, laboriosam debitis dolores rem dolor?

Bref, en gros, ça fait ça :

Merci encore ! 😄

TheOldNoob Le 29 avril 2016 à 16:23

Tu as essayé de changer la taille de la police avec un font-size?
Et d'y mettre l'unité en em

Clouder Le 29 avril 2016 à 16:24 (Édité le 29 avril 2016 à 16:26)

@TheFlameflo c'est ton jour de chance !

Utilise "overflow:hidden;"

Sinon n'oubli pas non plus de fermer ta balise <p></p> sa peut venir de ça aussi voir même à 100%. 😋

TheOldNoob Le 29 avril 2016 à 16:27

Bienvue @Clouder !

Clouder Le 29 avril 2016 à 16:43

@TheHoldNoob C'était pas trop dur en même temps généralement sa provient d'une balise mal fermé ou alors du CSS avec certain navigateur. 😀

TheFlameflo Le 29 avril 2016 à 17:01

Salut !

Je viens de fermer la balise <p>.
Cependant, un overflow:hidden fais disparaître le texte, j'aimerais juste qu'il coupe et vienne se mettre en dessous ! 😉
J'ai aussi mis en em (1 em).
Voici le jsfiddle : https://jsfiddle.net/ns0tLpp3/.

Merci à vous deux ! 😀

Clouder Le 29 avril 2016 à 18:58

Effectivement.. Essaie de mettre un border pour voir comment ça se passe mais je pense que l'affichage a un problème la

TheFlameflo Le 29 avril 2016 à 20:22

Salut !

J'ai mis un border, voici le résultat : jsfiddle.

Merci ! 😀

TheOldNoob Le 29 avril 2016 à 20:57

bah c'est pas mal du tout !
Après, tu a des trucs du genre :

word-wrap: break-word;

qui vont te couper ton mot et le mettre a la ligne.
Et puis tu a aussi :

-webkit-hyphens: auto;  
-moz-hyphens: auto;  
-ms-hyphens: auto;  
-o-hyphens: auto;  
hyphens: auto;

qui te coupe ton mot, le met a la ligne et lui met un petit -

Les deux sont cumulable si le navigateur utilisé ne prend pas hypens, il ira automatiquement sur word-wrap.

TheFlameflo Le 30 avril 2016 à 00:32

Merci pour tout ! 😀

Couper un texte qui dépasse d'une div

Échange

Articles / Vidéos

Ressources