CODEWITHSUNDEEP
css
Ammar Alyousfi
Ammar Alyousfi

Reputation: 4372

How to remove these extra spaces from a p element?

This is the code that demonstrates the case:

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

You can view the code and its output on CodePen here: https://codepen.io/ammar_/pen/qXgvZg/

When the width of the viewport becomes about 360px, extra areas that don't contain text appear. I want to remove these areas.

The areas are shown in the following image inside red rectangles:

How can I do that?

Upvotes: 1

Views: 108

Answers (4)

Pawan Kumar
Pawan Kumar

Reputation: 1374

Instead of <p> tag, use <span> and use <br> tag for line break. Also, need to set the line-height otherwise because of padding it gets overlapped.

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

Upvotes: 2

Guillotine
Guillotine

Reputation: 93

If the width is significiant in your case just use media queries

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

}

This will allow you to trigger specified behavior in the desired way!

EDIT:

You can always try to align text using properties on containers like adding width: 80%; to above code, You can also combine those with hints from other answers.

Upvotes: 0

juzraai
juzraai

Reputation: 5943

Try text-align: justify. That way, wrapped lines in paragraphs will be stretched horizontally to the right edge.

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

Upvotes: 3

kyun
kyun

Reputation: 10264

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

Try to add word-break: break-all

Upvotes: 2

Related Questions