https://blog.kangq.wang/tags/css/Recent content in CSS on 桃花岛种桃Hugo -- 0.155.3zh-cnSun, 18 Sep 2022 08:34:41 +0000https://blog.kangq.wang/duanluoliangduandui/Thu, 05 Sep 2019 08:18:54 +0000https://blog.kangq.wang/duanluoliangduandui/<h1 id="问题">问题</h1> <p>将博客的段落元素设置为两端对齐，结果本该不满行的文字，也被强行拉伸至两端对齐，如下图十分难看。</p> <p><img loading="lazy" src="https://blog.kangq.wang/images/%E5%BC%BA%E8%A1%8C%E6%8B%89%E4%BC%B8.png"></p> <!-- more --> <p>设置两端对齐的CSS代码：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a> </span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a> </span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a> </span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4">4</a> </span><span class="lnt" id="hl-0-5"><a class="lnlinks" href="#hl-0-5">5</a> </span><span class="lnt" id="hl-0-6"><a class="lnlinks" href="#hl-0-6">6</a> </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">p{ </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> text-align: justify; </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><h1 id="解决">解决</h1> <p>碰到问题问谷歌，查到<a href="https://www.cnblogs.com/PeunZhang/p/3289493.html">这篇文章</a>一段对 ‘text-align:justify’ 的注释：</p> <blockquote> <p>text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加 [空格 / 换行符 / 制表符] 才能起作用，同样，实现文本对齐也是需要在 字与字之间添加 [空格 / 换行符 / 制表符] 才能起作用</p>