Css 根据字符数更改行高

在我的React网站中，我想更改一个单词的行高属性，该属性会更改长度（基于其他一些逻辑）。我要做的是，这个词的每个字母都在一行：

.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个字母的单词就可以了，所以把它们全部写出来是没有问题的。

考虑到我不确定是否完全理解了你的问题，但是

假设我们有一个

MyWord

组件，相对于给定文本的长度，我们需要对元素应用一定量的行高属性

首先，我会有一张长度和线宽匹配的地图，类似这样：

// 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

prop。我们根据文本属性长度指定内联样式属性值：

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

constmyword=（{text}）=>(
{text}
)

---

这只是我的一个想法，不管我有没有问题。。。我做了一支样品笔

请添加一块你已经拥有的JSX。这正是我想要的！非常感谢。