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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.