title: Truncating text inside a div
body: <p>I have some dynamic text (comes from a database) and I need to fit into a <code>div</code></p>
  
  <p>My <code>div</code> has a fixed size. However, when the text becomes too long, it breaks into two lines. I would like to put three dots at the end of longer texts to make them fit inside a single line.</p>
  
  <p>For example: <code>My really long text</code> becomes <code>My really lo...</code></p>
  
  <p>I have committed several attempts, but basically all of them depend on counting characters. That is, whatsoever, not really fortunate, for characters do not have a fixed width. For example, a capital <code>W</code> is much wider than an small <code>i</code></p>
  
  <p>Therefore, I encounter two main problems with the character-counting approach:</p>
  
  <ol>
  <li><p>If the text has many narrow characters, it gets cut and appended with ..., even if the text would actually fit on one line afore trimmed.</p></li>
  <li><p>When the text contains many wide characters, it ends up on two lines even after I cut it to the maximum number of characters and append the dots.</p></li>
  </ol>
  
  <p>Is there any solution here (JavaScript or CSS) that takes the actual width of the text into consideration, and not the number of characters?</p>