<p>Вибери потрібне значення для <code>text-combine-upright</code>:</p>
<select id="form">
<option value="none" name="value2" selected>none</option>
<option value="all" name="value2">all</option>
<!-- <option value="digits" name="value2">digits</option> -->
</select>
<p id="text">Текст виводиться як зазвичай. За замовчуванням.</p>
<hr>
<p id="block">平成20年4月16日に</p>
* {
box-sizing: border-box;
padding: 0;
}
body {
text-align: center;
font-family: momospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
#form {
padding: 8px 16px;
font-size: 19px;
}
#block {
margin: 75px auto 0 auto;
background: gold;
padding: 16px;
font-size: 18px;
color: #222;
writing-mode: vertical-lr;
text-combine-upright: none;
}
#text {
height: 150px;
background-color: #eee;
padding: 16px 0;
}
var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');
var textArray = { 'none': 'Форматування не відбувається. Значення без задання.',
'all': 'Всі послідовні символи в контейнері розміщуються горизонтально, щоб зайняти простір одного символу в межах вертикальної лінії контейнеру.',
'digits': 'Браузер спробує розмістити горизонтально кожну максимальну послідовність послідовних цифр ASCII (U + 0030â € U + 0039), яка має стільки або менше символів, ніж зазначене ціле число, яке займає пробіл одного символу у вікні вертикальної лінії. Значення у діапазоні 2-4.'};
form.onchange = function change() {
var newVal = getNewValue();
block.style.textCombineUpright = newVal;
text.innerHTML = textArray[newVal];
}
function getNewValue() {
var result = '';
for (var i = 0; i < form.options.length; i++) {
if (form.options[i].selected == true) {
result = form.options[i].value;
}
}
return result;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.