我不知道为什么这个简单的CSS不能工作…
.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; } < div class = "应用" > <a href="">Test Test Test Test Test Test Test</a> . < / div >
应该在第四次“测试”前后切断
我不知道为什么这个简单的CSS不能工作…
.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; } < div class = "应用" > <a href="">Test Test Test Test Test Test Test</a> . < / div >
应该在第四次“测试”前后切断
当前回答
还要确保在IE10及以下版本中,换行设置为正常。
下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。但是,wordWrap设置在Windows Internet Explorer中总是有效的,因为Internet Explorer不支持“文本自动换行”属性。
因此,在我的例子中,换行被设置为break-word(继承或默认?),导致文本溢出在FF和Chrome中工作,但在IE中不工作。
关于换行属性的Ms信息
其他回答
我必须做出一些长描述椭圆(只采取一个车道),同时响应,所以我的解决方案是让文本换行(而不是空白:nowrap),而不是固定宽度,我添加了固定高度:
span { display: inline-block; line-height: 1rem; height: 1rem; overflow: hidden; // OPTIONAL LINES width: 75%; background: green; // white-space: normal; default } <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au </span>
把这些写在你的css规则中。
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
对于我来说,我没有在内部div中设置它,而是在外部div中设置它,所以即使我有nowrap, overflow:hidden,和设置宽度,它也不起作用。代码如下:
<div className="outer">
<ToolTip>
<div className="inner"> long content needing to be cut
</div>
</ToolTip>
</div>
公认的答案是棒极了。但是,您仍然可以使用% width并获得text-overflow: ellipsis。解决方法很简单:
display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */
似乎无论何时使用calc,最终值都是以绝对像素表示的,因此对于1000px宽度的容器,将80%转换为800px之类的值。因此,不要使用width: [YOUR PERCENT]%,而是使用width: calc([YOUR PERCENT]%)。
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a