CSS:如何使用"..."限制显示的文本

Question

可能重复:
是否可以使用javascript或css实现overflow:省略号的效果？
如何使用CSS将长文本指定到较小的固定列中？

我希望修剪文本,如果它大于300px宽,带"......"

例如,如果我有:

<ul>
<li>this is greater than 300px, than only display as much of the text that is 300px wide and then replace the remaining text with "..."</li>
<li>short, don't trim</li>
</ul>

将显示为:

this is greater than 300px, than only ...
short, don't trim
|----------- 300px wide ----------------|

我如何用CSS/HTML做到这一点？