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

Question

下面的代码演示了这种情况：

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上查看代码及其输出：/pen/qXgvZg/

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

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

​

​

我怎么能这么做？

Answer 1

不要使用<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 2

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

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

尝试添加word-break: break-all