Question

我想知道是否可能有这样的东西

.full-width {
  font-size: 10vh;
  letter-spacing: 15vw;
}

<div class="full-width">
  testing
</div>

可以说，效果很好，字体大小合适，并且从一端均匀地分布到另一端。我只是通过尝试查看哪种大小来制作CSS的。

但是，如果我将文本从“测试”更改为“家庭”，它就不会再延伸了。

例如

.full-width {
  font-size: 10vh;
  letter-spacing: 15vw;
}

<div class="full-width">
  home
</div>

请注意，直到我更改了css（我又从错误和错误中发现了）之后，家就不再从头到尾地到达。

.full-width {
  font-size: 10vh;
  letter-spacing: 30vw;
}

<div class="full-width">
  home
</div>

我不确定如何通过js动态更改文本以预测所需的完整宽度。

关于约瑟夫的回答；这是用于我要向其中传递新文本的react组件。因此，当我遇到这种情况innerText时，返回的是null，因此会导致我出错。

我试图这样处理

var footerContents = this.props.page();
 var contents = [];
 footerContents.split('').map(i => contents.push(<span> {i} </span>)).join('');

然后只显示内容

<div class="full-width">
  {contents}
</div>

Answer 1

可以使用javascript完成

    var el = document.getElementById('test');
    var html = el.innerText.split('').map(i => '<span>'+i+'</span>').join('');
    el.innerHTML = html;

        .full-width {
            font-size: 10vh;
            display: flex;
            justify-content: space-between;
        }

<div id="test" class="full-width">
    home
</div>

Answer 2

对于反应情况：

var footerContents = this.props.page() || '';
var contents = footerContents.split('').map(i => <span> {i} </span>);

在整个页面上均匀且动态地拆分文本

2 个答案: