Блог

Итак, у меня есть эта проблема, которую я пытаюсь решить.. Я получил некоторый текст в некоторой таблице, и я хотел бы, чтобы он отображался в вертикальной ориентации, когда пользователь получает доступ к странице с мобильного устройства, потому что это довольно длинный текст, и он лучше подходит для вертикального.

Теперь это мой код:

 <style>
@media only screen and (max-width: 768px) {
ul.vert_text {
    text-orientation: upright;
    text-align: justify;    
    word-wrap: break-all;
    writing-mode: vertical-rl;
  }
  }
</style>
<table>
<tbody>
<tr>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
</tr>
<tr>
<td>ダミーテキスト</td>
<td>
<ul class="vert_text">
        
     <li>ダミーテキストダミーテキスト</li>
     <li>ダミーテキストダミーテキスト</li>
     <li>ダミーテキストダミーテキストダミーテキストダミーテキスト</li><br>
     <li>ダミーテキスト</li>
        
</ul>
</td>
<td>
<ul class="vert_text">
        
     <li>ダミーテキスト</li>
     <li>ダミーテキストダミーテキストダミーテキスト</li>
     <li>ダミーテキストダミーテキスト</li>
        
</ul>
</td>
</tr>
<tr>
<td>ダミーテキスト</td>
<td>
<ul class="vert_text">
        
     <li>ダミーテキスト</li>
     <li>ダミーテキストダミーテキスト</li>
     <li>ダミーテキストダミーテキストダミーテキストダミーテキスト</li>
        
</ul>
</td>
<td>
<ul class="vert_text">
        
     <li>ダミーテキストダミーテキスト</li>
     <li>ダミーテキスト</li>
     <li>ダミーテキストダミーテキスト</li>
     <li>ダミーテキストダミーテキストダミーテキスト</li>
        
</ul>
</td>
</tr>
</tbody>
</table>
 

Когда я пробую это в браузере ПК, имитирующем экран мобильного устройства, текст не вызывает проблем, но когда я пробую это с safari на iphone, он отображается неправильно (он переполняется из таблицы и отображается не по вертикали, а справа налево)
В чем может быть проблема?

Вы можете попробовать: -webkit-ориентация текста: вертикально; -webkit-режим записи: вертикально-rl;