title: Make part of sentence with ellipsis in case that length of sentence is more than two lines
body: <p>I have a sentence that contains job title and location, and I have a limitation of two lines for writing the whole sentence.</p>
  
  <p>The maximum length of the location is 30 characters, but the maximum length of the job title is unknown.</p>
  
  <p>In order to achieve it, I need to make the job title more shorter (with dot dot dot).</p>
  
  <p>These examples work fine:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, california, usa&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, ca&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But these examples don't work:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager and driver&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, ca&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The job should be replaced with "Sales Manager and ..."</p>
  
  <p>By this way, the sentence will be exactly two rows.</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager and driver&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, california, usa&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The job should be replaced with "Sales Manager..."</p>
  
  <p>By this way, the sentence will be exactly two rows.</p>
  
  <p>This is my css:</p>
  
  <pre><code>#container {
    width:208px;
    boder: 1px solid black;
    height: 2em; /* two lines limit */
    line-height: 1em; /* two lines limit */
    overflow: hidden; /* two lines limit */
  }
  
  .ellipsis { /* dot dot dot */
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
  }
  </code></pre>
  
  <p>And these are my snippest (I have created the same snippest in two platforms):</p>
  
  <p>1) <a href="http://jsfiddle.net/Ht6Ym/3734/" rel="nofollow">http://jsfiddle.net/Ht6Ym/3734/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    width:208px;
    boder: 1px solid black;
    height: 2em; /* two lines limit */
    line-height: 1em; /* two lines limit */
    overflow: hidden; /* two lines limit */
  }
  
  .ellipsis { /* dot dot dot */
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="color:red;"&gt;It works:&lt;/div&gt;
  
  &lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, california, usa&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, ca&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div&gt;--------------------------&lt;/div&gt;
  
  &lt;div style="color:red;"&gt;It doesn't work:&lt;/div&gt;
  &lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager and driver&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, california, usa&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;div id="container"&gt;
    &lt;span&gt;Find more&lt;/span&gt;
    &lt;span id="job" class="ellipsis"&gt;Sales Manager and driver&lt;/span&gt;
    &lt;span&gt;jobs in &lt;/span&gt;
    &lt;span id="location"&gt;san francisco, ca&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help appreciated!</p>