溢出：隐藏点在最后
比方说，我有一个string“我喜欢大屁股，我不能说谎”，我用溢出：隐藏，所以它显示这样的东西：
“我喜欢大屁股，我不能”
切断文本。 有没有可能像这样显示：
“我喜欢大屁股，我不能…”
使用CSS？
你可以使用文本溢出：省略号; 根据caniuse支持所有主要的浏览器。
这里是一个 jsbin 演示 。
省略号将显示在IE中，而不是Mozilla。 在文本只是“切断”而不是省略号的情况下，您仍然可以获得类似的效果。
检查以下代码片段，找出问题所在
div{ width : 100px; overflow:hidden; display:inline-block; text-overflow: ellipsis; white-space: nowrap; }
<div> The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P </div>
是的，通过CSS 3中的text-overflow属性。警告：它尚未在浏览器中得到普遍支持。
<style> .dots { display: inline-block; width: 325px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } .dot { display: inline-block; width: 185px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } </style>
大多数解决scheme在此使用静态宽度。 但由于某些原因有时可能会出错。
例如：我有很多列的表。 他们大多数是窄（静态宽度）。 但主栏应尽可能宽（取决于屏幕大小）。
HTML：
<table style="width: 100%"> <tr> <td style="width: 60px;">narrow</td> <td> <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible"> dynamic column can have really long text which can be wrapped on two rows but we just need not wrapped texts using as much space as possible </span> </td> </tr> </table>
CSS：
.cutwrap { position: relative; overflow: hidden; display: block; width: 100%; height: 18px; white-space: normal; color: transparent !important; } .cutwrap::selection { color: transparent !important; } .cutwrap:before { content: attr(data-cutwrap); position: absolute; left: 0; right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; } /* different styles for links */ a.cutwrap:before { text-decoration: underline; color: #05c; }
