Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: TheFlameflo
Ce topic a été résolu
Auteur Sujet: Couper un texte qui dépasse d'une div

TheFlameflo

Messages: 304

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 ! Sourire
Publicité

TheOldNoob

Messages: 598

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 Sourire
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

Messages: 304

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 ! Sourire

TheOldNoob

Messages: 598

ça dépend Sourire

Tu voulais faire quoi exactement avec
min-height: calc(100vh - 10px);
?
Parce que ça ressemble a un margin:10px;  sur ta div parent.

TheFlameflo

Messages: 304

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

Messages: 598

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

Messages: 304

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

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

TheOldNoob

Messages: 598

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

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

TheFlameflo

Messages: 304

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 ! Grand sourire

TheOldNoob

Messages: 598

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

Clouder

Messages: 82

@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%. Tire la langue

TheOldNoob

Messages: 598

Bienvue @Clouder !

Clouder

Messages: 82

@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. Sourire

TheFlameflo

Messages: 304

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 ! Clin d'oeil
J'ai aussi mis en em (1 em).
Voici le jsfiddle : https://jsfiddle.net/ns0tLpp3/.

Merci à vous deux ! Sourire
Publicité

Clouder

Messages: 82

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

TheFlameflo

Messages: 304

Salut !

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

Merci ! Sourire

TheOldNoob

Messages: 598

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

Messages: 304

Merci pour tout ! Sourire


Veuillez vous connecter ou créer un compte pour poster une réponse