如何从 p 元素中删除这些额外的空格？答案

【问题标题】：How to remove these extra spaces from a p element?如何从 p 元素中删除这些额外的空格？
【发布时间】：2017-09-02 21:11:44
【问题描述】：

这是演示案例的代码：

HTML

<div class="skill-cat">
<p class="skill-cat-title">Others</p>
  <div class="skills">
    <p class="skill">Familiar with Mac and Windows operating systems</p>
    <p class="skill">Markdown markup language</p>
    <p class="skill">Lyx (LaTex typesetting application)</p>
    <p class="skill">many of Apple iWork and Microsoft Office applications</p>
    <p class="skill">video editing</p>
    <p class="skill">working with command-line interface</p>
    <p class="skill">research and self-learning</p>
  </div>
</div>

CSS

.skill-cat-title {
    font-weight: bold;
    font-size: 115%;
    margin-bottom: 1%;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2%;
}

.skill {
    margin: 7px 7px;
    padding: 5px;
    background-color: gold;
}

您可以在 CodePen 上查看代码及其输出：https://codepen.io/ammar_/pen/qXgvZg/

当视口的宽度变为大约360px 时，会出现不包含文本的额外区域。我想删除这些区域。

这些区域显示在下图中红色矩形内：

我该怎么做？

【问题讨论】：

基本上，NO...这不是 line-box 模型的工作方式 - stackoverflow.com/questions/35005024/…

标签： css

【解决方案1】：

试试text-align: justify。这样，段落中的换行将被水平拉伸到右边缘。

.skill-cat {
  width: 360px; /* added to demonstrate wrapping */
}

.skill-cat-title {
  font-weight: bold;
  font-size: 115%;
  margin-bottom: 1%;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2%;
}

.skill {
  margin: 7px 7px;
  padding: 5px;
  background-color: gold;
  text-align: justify;
}

<div class="skill-cat">
  <p class="skill-cat-title">Others</p>
  <div class="skills">
    <p class="skill">Familiar with Mac and Windows operating systems</p>
    <p class="skill">Markdown markup language</p>
    <p class="skill">Lyx (LaTex typesetting application)</p>
    <p class="skill">many of Apple iWork and Microsoft Office applications</p>
    <p class="skill">video editing</p>
    <p class="skill">working with command-line interface</p>
    <p class="skill">research and self-learning</p>
  </div>
</div>

【讨论】：

很好，但单词的间距过大。我希望完全删除那些多余的空格。
@ammarx 事实上你不能除非你选择text-align: justify 或设置word-break 行为......另一个是你可以使用省略号如果您将文本保留在一行中...
我的另一个想法是添加<br>标签并使其仅显示在某些视口宽度上。
@juzraai 在我看来这实际上可能是最有效的解决方案，尽管它需要更多配置。
确实，这需要大量标记并且难以维护。相反，您可以尝试@user2 的答案，这看起来很有希望。

【解决方案2】：

使用<span> 代替<p> 标记并使用<br> 标记进行换行。另外，需要设置line-height，否则padding会重叠。

.skill-cat-title {
  font-weight: bold;
  font-size: 115%;
  margin-bottom: 1%;
}

.skills {}

.skill {
  padding: 5px 5px;
  line-height: 25px;
  background-color: gold;
}

<div class="skill-cat">
  <p class="skill-cat-title">Others</p>
  <div class="skills">
    <span class="skill">Familiar with Mac and Windows operating systems</span><br/><br/>

    <span class="skill">Markdown markup language</span><br/><br/>
    <span class="skill">Lyx (LaTex typesetting application)</span><br/><br/>
    <span class="skill">many of Apple iWork and Microsoft Office applications</span><br/><br/>
    <span class="skill">video editing</span><br/><br/>
    <span class="skill">working with command-line interface</span><br/><br/>
    <span class="skill">research and self-learning</span>
  </div>
</div>

【讨论】：

有效！但是1.为什么选择line-height为25px；你是怎么计算的？ 2.为什么启用flexbox后这个解决方案不起作用？
1. by default font size in browser 是 16px 而这里我们有 5px padding top and bottom，所以它计算出 26px，所以我将其设置为 25px。 2. Flex boxes 可以更改其项目的宽度和高度以适应可用空间，因此它不适用于您的情况。

【解决方案3】：

.skill {
    margin: 7px 7px;
    padding: 5px;
    background-color: gold;
    word-break: break-all;
}

尝试添加word-break: break-all

【讨论】：

这确实删除了多余的空格，但它使文本看起来很难看。在我看来，没有连字符的断词是个坏主意。

【解决方案4】：

如果在您的情况下宽度很重要，请使用媒体查询

@media only screen and (max-width: 360px)
{
  .skills p
  {
    word-break: break-all;
  }

}

这将允许您以所需的方式触发指定的行为！

编辑：

您总是可以尝试使用容器上的属性来对齐文本，例如在上面的代码中添加width: 80%;，您也可以将这些与其他答案的提示结合起来。

【讨论】：