Pourquoi le texte est-il renvoyé à la ligne mais aucun trait d'union n'est affiché ?-Questions et réponses sur le réseau chinois PHP

Voici le code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  
  <ol class="meaning">
    <li class="meaning-item">这是一个示例句子，其中长单词应该被连字符分隔
      <ul class="sentences">
        <li class="sentence">这是一个示例句子，其中长单词应该被连字符分隔</li>
        <li class="translation">这是一个示例句子，其中长单词应该被连字符分隔</li>
      </ul>
    </li>
  </ol>
  
</body>
</html>

.meaning {
  list-style-type: none;
  counter-reset: item;
  font-size: calc(0.7em + 2.5vw);
  word-break: break-all;
  hyphens: auto;
}

.meaning > li {
  position: relative;
}

.meaning > li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  top: 0;
  text-align: center;
  margin-left: calc(-0.7em - 2.5vw);
}

.sentences {
  list-style-type: none;
  padding-left: 0;
}

Le mot est enveloppé comme je le souhaite, mais le trait d'union lui-même ("-") n'apparaît pas à l'endroit où le mot s'enroule.

De plus, je souhaite explicitement indiquer au navigateur

中的文本是英语（en），

que le texte qu'il contient est en allemand (de). Je sais que tous les navigateurs n'ont pas d'instructions intégrées pour les traits d'union pour des langues spécifiques, mais je voulais essayer.

J'ai également enregistré ce code dans JS Bin.

Merci !

.meaning { list-style-type: none; counter-reset: item; font-size: calc(0.7em + 2.5vw); hyphens: auto; } .meaning > li { position: relative; } .meaning > li::before { content: counter(item); counter-increment: item; position: absolute; top: 0; text-align: center; margin-left: calc(-0.7em - 2.5vw); } .sentences { list-style-type: none; padding-left: 0; }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ol class="meaning"> <li class="meaning-item">这是一个例子，其中复杂的非常长的单词应该被连字符分隔 <ul class="sentences"> <li class="sentence">这是一个例子，其中长的单词应该被连字符分隔</li> <li class="translation" lang="de">Das ist ein Beispiel für einen Satz, der außergewöhnlich überlange Wörter enthält, welche am Zeilenende bei Bedarf geteilt werden sollen.</li> </ul> </li> </ol> </body> </html>

répondre à tous(1)

P粉9201997612023-09-15 18:21:03 1 plancher

1.) N'utilisez pas word-break: break-all; - cela briserait les mots n'importe où, quelles que soient les règles de trait d'union.

2.) Combinez avec html 标签中使用 lang 属性和 hyphens: auto; pour activer la césure automatique.

3.) Vous pouvez utiliser des éléments différents lang 属性 - 请看下面我如何将 lang="de" 应用于最后一个 li dans n'importe quel élément contenant d'autres langues.

Comme +0

Ajouter une réponse