在CSS中的每个字符后面插入一个空格

 旧眸M_557 发布于 2023-02-09 10:56

我们假设我们有这个html:

TITLE

是否有可能通过CSS的强大功能使其成为或表现如下:

T I T L E

原因是我想证明标题中给定宽度上的字母是正确的,并且我不想在正确评估CSS选项之前求助于服务器端正则表达式巫术.

我已经设法通过CSS使用这些规则来证明单个字母:

h2 {
  text-align: justify;
  width: 200px; // for example
}

h2:after {
  content: "";
  display: inline-block;
  width: 100%;
}

我已经调查过了text-replace,但是在任何一个主流浏览器中都没有支持.除此之外,我还没有找到任何有希望的候选人.

如果有正确的支持,CSS3就可以了,JS没有任何帮助.

UPDATE

letter-spacing不是一个选项,因为它必须动态调整宽度,我不想永远检查浏览器的字距调整实现.但是多亏了那些家伙的建议,我知道在制定问题时我已经忘记了一些东西:)

这是摆弄的小提琴

3 个回答
  • 更简单的方法是使用字母间距css样式.

    例如

    h2 {
          letter-spacing:10px;
       }
    

    2023-02-09 11:00 回答
  • 使用CSS的字母间距:

    h2 {
      letter-spacing: 2em;
    }
    

    jsfiddle演示

    2023-02-09 11:00 回答
  • 为什么不使用字母间距?

    https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

    2023-02-09 11:02 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有