Можно ли использовать CSS для получения вертикального текста, чтобы заполнить текстовое поле с установленной шириной до наименьшей высоты, содержащей текст?

Вот фрагмент кода, показывающий эту проблему:Можно ли использовать CSS для получения вертикального текста, чтобы заполнить текстовое поле с установленной шириной до наименьшей высоты, содержащей текст?

<!Doctype html> 
<html> 
<head> 
    <style> 
    .writingMode { 
     writing-mode:tb-rl; 
     -webkit-writing-mode:vertical-rl; 
     writing-mode:vertical-rl; 
     border: 5px green solid; 
     word-break:break-word; 
     overflow:hidden; 
     min-height:200px; 
     width:100px; 
    } 
    </style> 
</head> 
<body> 
    <div style="background-color:yellow; height:500px; width:200px; float:left;"> 
     <div class="writingMode"> 
       All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis 
     </div> 
    </div> 
    <div style="background-color:orange; height:600px; width:200px; float:left;"> 
     <div class="writingMode"> 
       pneumonoultramicroscopicsilicavolcaniconiosis 
     </div> 
    </div> 
    <div style="background-color:yellow; height:700px; width:200px; float:left;"> 
     <div class="writingMode"> 
       All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis 
     </div> 
    </div> 
</body> 
</html>

Я хотел бы все внутренние дивы быть такой же высоты, как это диктуется самое длинное слово в них. Вместо этого они растут на высоте своих родителей, за исключением середины в Chrome. Есть ли тег CSS, который я мог бы использовать, чтобы увеличить их до минимальной высоты (выше заданной минимальной высоты), которая подходит ко всему тексту, основанному на переносе слов сломанного слова? Мне кажется логичным, что то, что у меня есть, сделает это, но это не так.

Редактировать: Наружные Divs (большие желтые и оранжевые) должны оставаться разной высоты, но внутренние Divs должны быть одинаковой высоты, потому что их самые длинные слова одинаковы.

Спасибо!

источник

2015-07-27 Steven Wojcio

Снимите высоту с родительского элемента и минимальную высоту от детей. Я сделал скрипку. Надеюсь, что this - это то, что вы имеете в виду?

.writingMode { 
    writing-mode:tb-rl; 
    -webkit-writing-mode:vertical-rl; 
    writing-mode:vertical-rl; 
    border: 5px green solid; 
    word-break:break-word; 
    overflow:hidden; 
    width:100px; 
}

источник

2015-07-27 23:17:46

К сожалению нет :(Я должен был немного яснее, хотя. Я установил внешние дивы, чтобы иметь различную высоту, чтобы показать проблему немного более четко. Я не хочу, чтобы они остались, как они есть, и внутренние дивы для всех будет тот же размер (минимальный размер, необходимый для хранения их самого длинного слова). Если вы отрисовываете его в Chrome, вы можете видеть, что размер среднего текстового поля правильный. Мне нужно, чтобы внешние два соответствовали. проблема. –

Если вы говорите тот же размер, вы имеете в виду, например, все три из них того же размера? Или вы имеете в виду, что divs просто принимают размер слов? –

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

Можно ли использовать CSS для получения вертикального текста, чтобы заполнить текстовое поле с установленной шириной до наименьшей высоты, содержащей текст?

ответ

Смежные вопросы