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

Question

这是演示案例的代码：

HTML

Query: INSERT INTO Employee(department_id,NAME) VALUES (2,'Mark')

1 row(s) affected

Execution Time : 0.021 sec
Transfer Time  : 0 sec
Total Time     : 0.022 sec

CSS

<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>

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

当视口的宽度变为大约.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; } 时，会出现不包含文本的额外区域。我想删除这些区域。

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

我该怎么做？

Answer 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>

Answer 2

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

尝试添加word-break: break-all

Answer 3

使用<p>代替<span>代码，并使用<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>

Answer 4

如果您的情况下宽度有意义，请使用媒体查询

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

}

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

编辑：

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