[前端]文本文字间距、左右两端对齐设置问题开发过程中遇到需要展示大量文字描述的情景，不做处理的情况下因默认文字换行机制

问题

开发过程中遇到需要展示大量文字描述的情景，不做处理的情况下因默认文字换行机制导致文字排列非常不美观

<body>
  <div class='text-box'>
       <p>
         1、 相信使用 element-ui组件库的小伙伴应该知道 codepen在线编辑器，因为element-ui默认的在线案例都是通过 codepen提供。以下是的一个在线案例。
      分别提供了 html、css、js 编辑框，以及预览视图，简洁明了。顶部几个按钮分别可以进行保存、项目配置（引入依赖在此配置）、切换展示视图等等。
       </p>
       <p>
         2、 不过在实际的构建过程中发现一个问题，页面上使用的是Uniapp的easyinput内置组件，在点击easyinput后,页面出现虚拟键盘，在h5的模式下并未出现问题，在微信小程序下页面出现上移的情况，但并未出现其他过于影响功能的问题，在支付宝小程序中页面出现上移情况，并且在用户点击使得easyinput失去焦点后页面布局出现异常(在我这里主要体现的是页面上移，并且滚动到页面最顶部)
       </p>
  </div>
</body>

  .text-box{
    width: 200px;
    margin: 20px auto;
  }
  
  p{
    text-indent: -2em;
  }

微信截图_20231220095429.png

可以发现左右文字并不能完全对齐

处理

文字间距letter-spacing

设置文本字符的间距

  p{
    text-indent: -2em;
    letter-spacing: 2px;
  }

微信截图_20231220095429.png

单词间距 word-spacing

设置标签、单词之间的空格长度

 p{
    text-indent: -2em;
    letter-spacing: 2px;
    word-spacing: 2px;
  }

两端对齐文本text-align

p{
    text-indent: -2em;
    letter-spacing: 2px;
    word-spacing: 2px;
    text-align: justify;
 }