1
votes

comment aligner le texte au centre du texte avec un espace et un saut de ligne

J'ai l'exemple suivant ci-dessous:

<textarea class="wrapper" autosize>THE GREAT BANGKOK SALE</textarea>

.wrapper {
  text-align: center;
  border: 1px solid red;
  background-color: white;
  color: black;
  width: 240px;
  height: 200px;
  font-size: 36px;
  line-height: 43px;
}

https://jsfiddle.net/ngoctuan001/cgLvh62o/2/ a>

Comme vous pouvez le voir, je souhaite aligner le texte dans la balise textarea . Étant donné que la zone de texte a une largeur fixe, elle essaiera de passer à la ligne suivante lorsqu'il y a un espace. Cependant, lorsque cela se produit, cette ligne n'est légèrement pas centrée dans les yeux humains en raison de l'espace.

Comme vous pouvez le voir sur la capture d'écran ci-dessus, la ligne rouge sur le côté droit est toujours légèrement plus longue que la ligne rouge sur le côté gauche, c'est parce que l'ordinateur traite l'espace (mis en surbrillance) comme 1 caractère supplémentaire. Mais aux yeux des humains, cela n'est pas considéré comme aligné au centre

Y a-t-il de toute façon un moyen de résoudre ce problème? Merci

javascript html css text-align center

5 commentaires

Essayez d'utiliser flex avec align-items: center;

@Awais vous voulez dire ajouter "display: flex; align-items: center;" à la zone de texte? j'ai essayé mais ça n'a rien changé

Oui! à la classe wrapper , vous pouvez tester cela en augmentant la hauteur de la zone comme 300px

@Awais jsfiddle.net/ngoctuan001/cgLvh62o/5 <= j'ai essayé, cela ne fonctionne pas . Je pense que cela ne fonctionne que si "wrapper" est div, pas textarea

@NgocTuanLam Je pense que cela ne peut pas être fait car l'espace est également considéré comme un caractère. Basé sur le nombre total de caractères, seul l'alignement de texte fonctionnera.

3 Réponses :

0
votes

Une solution serait d'utiliser le contentEditable = "true" sur un div.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

const content = document.querySelector('.wrapper').innerText;

Cela rendra le contenu correctement centré et vous pourrez également le modifier.

Pour obtenir le contenu, vous:

<div class="wrapper" contentEditable="true">
  THE GREAT BANGKOK SALE
</div>

0 commentaires

1
votes

Malheureusement, il n'y a pas de solution CSS concrète au moment de la rédaction pour obtenir le résultat souhaité

Alternative: utilisez contenteditable
<div class="container">
  <div class="text" contenteditable=true>click here and edit</div>
</div>
.container {
  width: 100px;
  height: 150px;
  background: #eee;
  display:flex;
  align-items: center;
  justify-content: center;
}

.text {
  text-align: center;
  word-break: break-all;
  margin: 10px;
}

1 commentaires

Il semble qu'il n'y ait aucun moyen de faire cela avec textarea, mais div ou p fonctionne bien. Merci pour ton aide

1
votes

mettez votre texte dans la balise p et vous pouvez essayer

.wrapper
{
display: flex;
    align-items: center;
    justify-content: center;

}

0 commentaires