Afficher les traits d'union uniquement lorsque cela est nécessaire ? (le trait d'union doux ne le coupera pas)

Question

Est-il possible d'utiliser des traits d'union ou des traits d'union souples en CSS afin que les traits d'union ne soient pas rendus inutilement ?

Mon objectif est de conserver le texte original autant que possible et de séparer tous les mots, à moins que cela ne soit absolument critique, car ils sont trop longs pour tenir dans la largeur du conteneur.

Mon cas spécifique

Je souhaite afficher le texte "Salut Superman" comme ceci :

Si le mot "Superman" est trop long pour tenir dans le conteneur, je souhaite le couper d'une manière ou d'une autre, comme :

Salut Super-
l'homme&Lt ;/pré> ;
<p>Cependant, si le mot « Superman » peut tenir dans le conteneur, il doit être rendu sans tirets</p>
<pre class="brush:php;toolbar:false;">Bonjour
Superman</pré>
<p>Si la situation ci-dessus est possible (« Superman » peut être sans trait d'union), alors l'ajout de <em>traits d'union inutiles</em> n'est pas acceptable : </p>
<pre class="brush:php;toolbar:false;">Salut Super-
l'homme&Lt ;/pré> ;
<p>Je peux modifier le code HTML si nécessaire. Je peux insérer des traits d'union de manière significative (tant qu'il y a plus de 3 lettres entre chaque trait d'union. "Superma-n" n'est jamais bon)</p>
<h3>Ce que j'ai essayé</h3>
<p>Je pense que les tirets souples sont la solution. J'ai donc utilisé :<code>Salut Super­man</code></p>
<p>Mais je trouve que cela conduit à la situation inacceptable des « traits d’union inutiles » illustrée ci-dessus. </p>
<h3>Afficher l'extrait ayant échoué : </h3>
<p>

<pre class="snippet-code-css lang-css Prettyprint-override"><code>body {
  marge gauche : 30 px ;
}
div{
   bordure : noire unie de 1 px ;
}
.large {
  bordure : bleu uni de 1 px ;
      largeur : 500 px ;
}
.étroit {
  bordure : rouge uni de 1 px ;
  largeur : 360 px ;
}
 h2 {
   famille de polices : « Courier New » ;
    poids de la police : 400 ;
    taille de police : 87 px ;
  }
code {
 couleur d'arrière-plan : #eee ;
}</code>

<code><p> <code>Super&amp;shy;man</code> le mot complet "Superman" ne conviendrait pas</p>
<p>
<div class="narrow"><h2>Salut Super&shy;man</h2></div>

<p>Mais dans ce cas, le mot "Superman" tiendrait sans trait d'union sur la deuxième ligne. Mais ce foutu CSS décide quand même d'ajouter des traits d'union. Inacceptable dans mon cas !
Encore une fois, cela utilise le même code que l'exemple précédent
<code>Homme super&amp;timide</code></p>
<div class="wide"><h2>Salut Super&shy;man</h2></div>

<p>J'ai même essayé d'ajouter une balise wordbreak avant "Superman", comme ceci <code>Hi <wbr> Super&amp;shy;man</code> ;
<p>
<div class="wide"><h2>Salut <wbr>Homme super&timide</h2></div></code>

Puis-je résoudre l’exemple ci-dessus en utilisant uniquement CSS ? (J'ai essayé différents attributs word-break sans succès)

Je suppose qu'en raison de la nature du CSS, il est impossible de résoudre ce problème en utilisant simplement du HTML et du CSS. Je suppose que CSS analyse simplement le texte ligne par ligne et ne peut jamais savoir si un mot "s'adapte mieux" dans la ligne de texte suivante. Si un trait d'union est trouvé, il essaiera d'adapter le nombre maximum de caractères dans la ligne de texte actuelle.

J'aimerais résoudre ce problème en utilisant uniquement HTML et CSS, ou pas du tout.

Meilleur :

• N'utilise pas JavaScript pour l'analyse de texte.

  ≪/li>

• Je ne veux pas avoir à définir des propriétés CSS différentes pour chaque div en fonction de la largeur du div et si je pense que le texte a besoin d'un trait d'union.

  ≪/li>

• Je ne souhaite pas ajouter d'habillage autour de mon texte

  ≪/li>

• Ne pas avoir de césure automatique entraîne des traits d'union ridicules comme "Superma-n" (mais à la rigueur, je peux utiliser la césure automatique tant qu'il y a 3 caractères entre chaque trait d'union. Par exemple "Sup -erman")

  ≪/li>

Answer 1

CSS 3 inclut un attribut "hyphens”属性，可根据指定的 lang" pour définir le trait d'union. Mais ce n'est qu'un ébauche de travail, donc le support est un peu < a href="https://caniuse.com/#search=hyphens" rel="nofollow noreferrer">encore.

Vous pouvez le régler sur

Aucun, donc aucun trait d'union ne sera affiché
manuellement, il n'y aura donc de saut de mot que là où le caractère spécial
• est déclaré, ou ­
auto, qui ajoute automatiquement des traits d'union si nécessaire en fonction de la localisation.

Fonctionne bien dans Firefox, Edge et même IE, mais le principal problème est que webkit ne prend pas en charge la valeur "auto". Sauf sur Mac et Android, c'est la seule valeur qu'ils acceptent. Oui, c'est un

bug bizarre.

Ceci est un exemple, si vous utilisez Windows/Linux, assurez-vous de vérifier la différence entre Firefox et Chrome.

p { 
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<ul>
    <li><code>auto</code>: hyphen where the algorithm is deciding (if needed)
    <p lang="en" class="auto">An extremelyasdasd long English word</p>
  </li> 
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;lyasd long English word</p>
  </li>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;lyasd long English word</p>
  </li>
</ul>

Une solution de contournement courante pour le manque de support "auto" par webkit consiste à utiliser tirets:auto avec webkit

afin que le texte soit coupé avec un trait d'union sur les navigateurs qui le prennent en charge et sans trait d'union sur webkit. work-break:break-all

Answer 2

Utilisez des conteneurs avec display: inline-block autour des mots longs.

body { 
  margin-left: 30px;
}
div {
   border: solid 1px black;
}
.wide {
  border: solid 1px blue;
      width: 500px;
}
.narrow { 
  border: solid 1px red;
  width: 360px;
}
 h2 {
   font-family: 'Courier New';
    font-weight: 400;
    font-size: 87px;
  }
code {
 background-color: #eee;
}

.unbreakable {display:inline-block}

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p>
<p>
<div class="narrow"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

<p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/>
This uses the same code as the previous example</p>
<div class="wide"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>