Изменить высоту строки в зависимости от количества символов

Question

На моем веб-сайте React я хотел бы изменить свойство line-height слова, которое у меня есть, которое меняет длину (основываясь на некоторой другой логике).Что я делаю, так это то, что каждая буква слова находится на отдельной строке:

.myWord {
  line-height: 3.9;
  word-break: break-all;
}

выводит:

m
y
w
o
r
d

Но мне также нужно, чтобы она выровнялась с другим элементом следующимчтобы он всегда был одинаково высоким.Текущая высота строки подходит только для слова длиной 6 букв.

Я нашел похожий вопрос по stackoverflow с ответом jQuery:

var cnt =  $(".tweeter_widget").text().length;
if (cnt > 10) {
  $(".tweeter_widget").css("line-height", "5px"); 
} 

Если бы кто-то смог перевести это вJSX или предоставьте другой ответ, я был бы очень признателен.

Логика в основном была бы такой:

• Если длина слова составляет 6 букв, высота строки будет равна 3,9
• Если слово состоит из 5 букв, высота строки будет равна 4,2
• ...

Мне нужно только 3-6 буквенных слов, так что это не проблемазапиши их все.

Answer 1

Учитывая, что я не совсем уверен, что понял ваш вопрос, но ...

Скажем, у нас есть компонент MyWord, относительно длины данного текста, мы должны применитьэлементу определенное количество свойства line-height.

Прежде всего, у меня была бы карта соответствий length-lineHeight, примерно такая:

// the key is the text length, the value is the applicable line-height
const HEIGHTS = {
    5: 4.2,
    6: 3.9
}

Если это полезно,мы могли бы сохранить значение по умолчанию, на случай, если что-то пропустим

const DEFAULT_HEIGHT = 1

Затем нам понадобится простой компонент MyWord, который принимает только text проп.Мы присваиваем значение свойства встроенного стиля по длине текста:

const MyWord = ({ text }) => (
    <div
        className="myWord"
        style={{
            lineHeight: HEIGHTS[text.length] || DEFAULT_HEIGHT
        }}
    >
        { text }
    </div>
)

Это всего лишь моя идея, задал ли я вопрос вообще ... Я сделал образец Pen ... https://codepen.io/ciamiz/pen/VEXNQo