根据字符数更改行高

Question

在我的反应网站，我想改变一个字的线高属性，我有改变长度(基于其他一些逻辑)。我要做的是，这个词的每一个字母都在一个单独的行上：

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

产出：

m
y
w
o
r
d

但我也需要它与它旁边的另一个元素对齐，这样它总是一样高。目前的线条高度只适合于6个字母长的单词.

我在堆栈溢出中发现了一个类似的问题，并给出了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组件，相对于给定文本的长度，我们需要对元素应用一定数量的行高属性。

首先，我会有一张长度与直线高度匹配的地图，如下所示：

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

这只是我的一个想法，我是否有这个问题.我做了笔样本..。https://codepen.io/ciamiz/pen/VEXNQo