Is there a way with Javascript to determine where a line break is placed in HTML?

I have this html:

<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>

With this CSS:

.segmentHeader {
    font-size: 1.15em;
    font-weight: bold;
    border-bottom: #7792ad solid 1px;
    margin-bottom: 5px;
}

.feedBarSegment {
    width: 250px;
    margin:开发者_JAVA百科 52px 20px 20px 25px;
}

#tagsCloud {
    margin-top: 10px;
}

.tag {
    display: inline-block;
    background: #e9e3c4;
    padding: 2px 4px;
    border-top: 1px black solid;
    border-right: 1px black solid;
}

.subject {
    display: inline-block;
    background: #f2b2a8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    border: black solid 1px;
    margin: 2px;
}

I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?

If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.

I believe what you're looking for is:

#tagsCloud {
  text-align:justify;
}

http://www.w3schools.com/cssref/pr_text_text-align.asp

It seems like what you want is text-align: justify.