text-overflow with respect to text-align

HTML

<h4>
Problem
</h4>

<p>
Trying to get a line of text that exceeds the width of its container (e.g. via <code>white-space: nowrap</code>) flush against the right edge will not work. The <code>text-align</code> property will just be ignored.
</p>

<h4>
Fix?
</h4>
<p>
A proposed fix is <code>direction: rtl;</code>. However, if you're using it for actual textual content, be weary of adverse effects. E.g. numbers and punctuation may be presented as if in a right-to-left language at the end or beginning of the line, respectively.
</p>

<h5>
<code>nowrap</code> not aligning
</h5>
<div class="container">
  <h1>Yar Pirate Ipsum</h1>
  <p>
  Lee doubloon topgallant starboard chase guns snow Sail ho hornswaggle cog hands. Rigging jack pillage red ensign bounty run a shot across the bow lad scuttle Yellow Jack run a rig. Hempen halter Cat o'nine tails chase guns scurvy careen scourge of the seven seas aye marooned sheet dance the hempen jig. 
  </p>
  <div class="nowrap">
    This line seems just fine, doesn't it?<br />
    As does this one. What about below?<br />
    99 ships of pirates on sea, 99 ships of pirates.<br />
    ^I wish &ldquo;pirates&rdquo; would align right. =(
  </div>
</div>

<h5>
<code>direction: rtl;</code> Breaking Stuff
</h5>
<div class="container">
  <h1>Yar Pirate Ipsum</h1>
  <p>
  Lee doubloon topgallant starboard chase guns snow Sail ho hornswaggle cog hands. Rigging jack pillage red ensign bounty run a shot across the bow lad scuttle Yellow Jack run a rig. Hempen halter Cat o'nine tails chase guns scurvy careen scourge of the seven seas aye marooned sheet dance the hempen jig. 
  </p>
  <div class="nowrap nowrap--rtl">
    This line seems just fine, doesn't it?<br />
    As does this one. What about below?<br />
    99 ships of pirates on sea, 99 ships of pirates.<br />
    ^Whar be the first &ldquo;99&rdquo;?
  </div>
</div>

<h4>
Removing <code>direction</code>
</h4>

<p>
Since the issue with respect to <code>text-align</code> being ignored is...

CSS

.container {
  border: 1px solid rgba(0, 154, 223, .5);
  width: 250px;
  margin: auto;
  padding: 1em;
}

/* In response to:
   @link http://stackoverflow.com/a/3759435/781824
   His proposed code:
p { 
    direction: rtl; 
    border: 1px solid red; 
    width: 200px; 
    text-align: right; 
    white-space: nowrap;
}
*/

.nowrap {
  text-align: right;
  white-space: nowrap;
}

.nowrap--rtl {
  direction: rtl;
}

.nowrap--inline-block {
  display: inline-block;
}

.nowrap--float {
  direction: inherit;
  float: right;
}

/* Clearfix, as we cannot use `overflow: hidden;` on the parent. */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}