Las Line's alignment is not proper

selected-works div's last lines's alignmet is not proper. It's text-align property has value of justify but there is a problem in last line. It is like left based not justify. Other lines have no any problem. How can I solve this problem?

* {
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  text-align: center;
  color: rgb(231, 231, 231);
}

#wrapper {
  width: 60%;
  margin: 0 auto;
}

#hello {
  padding: 50px;
  border-bottom: 3px double rgb(185, 185, 185);
}

#avatar {
  border-radius: 50%;
  width: 130px;
  height: auto;
  margin-bottom: 15px;
}

#hello-header {
  margin-bottom: 15px;
  font-size: 45px;
}

#header-p {
  font-size: 36px;
}

.link {
  text-decoration: none;
  color: rgb(241, 225, 1);
}

.link:hover {
  color: gray;
  transition: 0.2s;
}

#selected-works {
  width: 100%;
  margin: 50px 0;
  padding-bottom: 50px;
  text-align: justify;
  border-bottom: 1px solid gray;
}

#sw-header {
  margin-bottom: 35px;
  text-align: center;
}

.work {
  width: 32%;
  display: inline-block;
  text-align: left;
}

.work img {
  width: 100%;
  height: auto;
}

.work img:hover {
  opacity: .5;
  transition: opacity .3s linear;
}
<div id="wrapper">
  <div id="hello">
    <img id="avatar" src="https://jonchretien.com/img/avatar.jpg">
    <h2 id="hello-header">Hello</h2>
    <p id="header-p">
      My name is Jon Chretien. I’m a <a class="link" href="https://en.wikipedia.org/wiki/New_York_City">NYC</a> based front end engineer currently working on web apps for artists at <a class="link" href="https://www.spotify.com/">Spotify</a>. I previously
      built editorial & marketing projects at <a class="link" href="https://www.nytimes.com/">The New York Times</a>.
    </p>
  </div>
  <div id="selected-works">
    <h1 id="sw-header">Selected Works</h1>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
    <div class="work">
      <a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
      <h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
      <p>Fan insights for artists & managers to discover more about their audience.</p>
    </div>
  </div>
</div>

selected-works div's last lines's alignmet is not proper. It's text-align property has value of justify but there is a problem in last line. It is like left based not justify. Other lines have no any problem. How can I solve this problem?

1 answer

  • answered 2018-10-11 19:12 Andrei Gheorghiu

    By default,

    text-align: justify;
    

    justifies all lines, except last one. If you also want the last line justified, you have to use text-align-last:

    text-align-last: justify;
    

    Note: This property is part of CSS text module 3 and current browser support sits at 77.98%. To add support for it in legacy browsers, one would need to use a polyfill.