See the Pen text-overflow by 熊瀬川直也 (@momonoki1990) on CodePen.

・そもそも、widthを設定しておかないと、文字の長さにしたがって親要素の幅が延々と広がってしまうので注意。
・white-space: nowrapとoverflow: hiddenを設定しないと文章が折り返されてしまったりはみ出した部分が非表示にならないので注意。
・あくまでtext-overflow: ellipsisは文章が決まった長さの枠(%でもOK)はみ出して非表示になる部分を「...」にして表示するだけ。
・別途、span要素にoverflow:hidden を設定しても効かなくてちょいハマり。これは、インライン要素は幅を持たないためと思われる。ブロック要素にoverflow: hiddenなどを設定するか、インライン要素にdisplay: inline-block を設定すれば、効く。