Question

在我的React网站上，我想更改我更改长度的单词的line-height属性（基于其他逻辑）。我正在做的是单词的每个字母都在单独的行上：

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

输出：

m
y
w
o
r
d

但是我还需要它与旁边的另一个元素对齐，以便它总是一样高。当前的行高仅适合6个字母长的单词。

我用jQuery答案在stackoverflow上发现了类似的问题：

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

然后，我们需要一个仅包含text属性的简单MyWord组件。我们根据文本属性的长度分配一个内联样式属性值：

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

这只是我的主意，是否我完全没有问题...我制作了一个示例笔... https://codepen.io/ciamiz/pen/VEXNQo

根据字符数更改行高

1 个答案: