项目需要开发一个仿医疗证书类的一个小卡片,用于模拟展示不同种类的证书信息,如下图片是官方的证书样例,证书的布局结构就是最上方一个大号的证书类型名称标题,下方的详细信息则是一个左右并列的布局结构,其中每一项信息的标题的文字间距都是根据统一的宽度进行不同的设定。证书标题与左右并列的布局结构较好解决,但是根据文本块宽度,让里面的内容文字间距自适应,这个在前端如果解决呢?
首先查询CSS属性表,发现有一个用于设置字符间距的属性:letter-spacing
letter-spacing属性增加或减少字符间的空白(字符间距)
那让我们看看letter-spacing
的实际使用效果: