CODEWITHSUNDEEP
cssline-breakscjk
Neo
Neo

Reputation: 213

How to prevent line breaks in Japanese text

I have html code

<tr>
    <th>
      勤務開始希望日
    </th>
    <td>
      <input maxlength="250" type="text">
    </td>
  </tr>

i want it inline: 勤務開始希望日 but the result is:

勤
務
開
始
希
望
日

I don't set max-width or any css for th tag. If not Japanese, it work fine. Please help me!

Upvotes: 0

Views: 796

Answers (1)

deceze
deceze

Reputation: 522135

table {
  width: 10px;
}
<table>
  <tr>
    <th>
      勤務開始希望日
    </th>
    <th>
      Starting date
    </th>
  </tr>
</table>

As you see, if a table/column is too narrow for some reason or another, line breaks are inserted so as to make the column as narrow as possible. English/Latin text is only broken at spaces (or with very intelligent hyphen-insertion), since it would otherwise become unreadable. Japanese/Chinese text is still perfectly readable when stacked, so it can be broken at any point.

You either want to prevent all line breaks:

table {
  width: 10px;
}

th {
  white-space: nowrap;
}
<table>
  <tr>
    <th>
      勤務開始希望日
    </th>
    <th>
      Starting date
    </th>
  </tr>
</table>

Or you want to enforce a certain minimum width:

table {
  width: 10px;
}

th {
  min-width: 4em;
}
<table>
  <tr>
    <th>
      勤務開始希望日
    </th>
    <th>
      Starting date
    </th>
  </tr>
</table>

Upvotes: 1

Related Questions