cari

Rumah  >  Soal Jawab  >  teks badan

Mengapa teks dibalut tetapi tiada tanda sempang ditunjukkan?

Ini kodnya: 

<!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;
}

Perkataan itu dibalut seperti yang saya mahukan, tetapi tanda sempang itu sendiri ("-") tidak muncul di mana perkataan itu dibungkus.

Selain itu, saya mahu secara eksplisit memberitahu penyemak imbas

  • 中的文本是英语（en），
  • bahawa teks di dalamnya adalah dalam bahasa Jerman (de). Saya tahu tidak semua penyemak imbas mempunyai arahan terbina dalam khusus bahasa untuk tanda sempang, tetapi saya ingin mencubanya.

    Saya juga menyimpan kod ini dalam JS Bin.

    Terima kasih!

    • P粉060112396P粉060112396438 hari yang lalu691

    membalas semua(1)saya akan balas

  • P粉920199761

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

    1.) Jangan gunakan word-break: break-all; - ia akan memecahkan perkataan di mana-mana, tanpa mengira peraturan sempang.

    2.) Gabungkan dengan html 标签中使用 lang 属性和 hyphens: auto; untuk membolehkan tanda sempang automatik.

    3.) Anda boleh menggunakan berbeza lang 属性 - 请看下面我如何将 lang="de" 应用于最后一个 li elemen dalam mana-mana elemen yang mengandungi bahasa lain. 

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

    balas
    0
  • Batalbalas