CSS文本溢出:省略号;不工作吗?

添加display: block;或display: inline-block;到#User_Apps_Content .DLD_App a

demo

你也可以在选择器中添加float:left;:

#User_Apps_Content .DLD_App a

text-overflow:ellipsis;仅在以下条件为真时有效:

• 元素的宽度必须限制在px(像素)。宽度在%(百分比)将不起作用。
• 元素必须有overflow:hidden和white-space:nowrap的集合。

这里出现问题的原因是a元素的width没有约束。你确实有一个width设置，但因为元素被设置为display:inline(即默认值)，它会忽略它，也没有其他任何东西限制它的宽度。

你可以通过以下方法之一来解决这个问题:

• 将元素设置为display:inline-block或display:block(可能是前者，但取决于你的布局需要)。
• 将其中一个容器元素设置为display:block，并给该元素一个固定的width或max-width。
• 将元素设置为float:left或float:right(可能是前者，但同样，就省略号而言，两者都应该具有相同的效果)。

我建议display:inline-block，因为这将对你的布局产生最小的附带影响;就布局而言，它的工作非常像display:inline，但可以自由地尝试其他点;我已经尽可能多地提供信息来帮助你们理解这些东西是如何相互作用的;理解CSS的很大一部分是关于理解各种样式如何一起工作。

下面是您的代码片段，并添加了display:inline-block，以显示您有多接近。

.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
display: inline-block;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}

<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>

有用的参考资料:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

对于IE10及以下版本，还要确保word-wrap设置为正常的。

下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。但是，wordWrap设置在Windows Internet Explorer中总是有效的，因为Internet Explorer不支持“文本自动换行”属性。

因此，在我的情况下，word-wrap被设置为break-word(继承或默认?)导致text-overflow工作在FF和Chrome，但不是在IE。

ms info on word-wrap property

# EYZ0, # EYZ1……标签默认为< em > < / em >内联元素，在内联元素的情况下，width属性不起作用。因此，您必须将元素转换为inline-block或block level元素

你只需要添加一行css:

.app a {
display: inline-block;
}

包括info后面写的四行，以便省略号起作用

.app a
{
color: #fff;
font: bold 15px/18px Arial;
height: 18px;
margin: 0 5px 0 5px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 140px;


/*
Note: The Below 4 Lines are necessary for ellipsis to work.
*/


display: block;/* Change it as per your requirement. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

把这些写在你的css规则中。

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

在bootstrap 4中，您可以添加一个.text-truncate类来用省略号截断文本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
The quick brown fox jumps over the lazy dog.
</span>

公认的答案是棒极了。但是，您仍然可以使用%宽度并获得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，最终值都是以绝对像素表示的，这就会将80%转换为800px，对于# eyz3宽度的容器。因此，不要使用width: [YOUR PERCENT]%，而是使用width: calc([YOUR PERCENT]%)。

我必须做出一些长描述椭圆(只采取一个车道)，同时响应，所以我的解决方案是让文本换行(而不是white-space: 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>

因此，如果您遇到这个问题是因为您在尝试让省略号在display: flex容器内工作时遇到了麻烦，请尝试将min-width: 0添加到最外面的容器，该容器正在溢出它的父容器，即使您已经设置了overflow: hidden，并查看这对您来说是如何工作的。

更多关于codepen by aj-foster的详细信息和工作示例。对我来说完全管用。

必须包含

  text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

绝对不能包含

display: inline

应该包含

position: sticky

我也遇到过同样的问题，似乎上面的解决方案都不适用于Safari。对于非safari浏览器，这工作得很好:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

对于Safari，这是适合我的。注意，用于检查浏览器是否是Safari的media查询可能会随着时间的推移而改变，所以如果它不适合您，只需修补一下media查询即可。使用line-clamp属性，也可以在web中使用省略号有多行，参见在这里。

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
@media {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}
}

我一直有这个问题，我想要一个解决方案，可以轻松地工作与动态宽度。解决方案使用css网格。 下面是代码的样子:

.parent {
display: grid;
grid-template-columns: auto 1fr;
}


.dynamic-width-child {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}


.fixed-width-child {
white-space: nowrap;
}

<div class="parent">
<div class="dynamic-width-child">
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
</div>
<div class="fixed-width-child">Why?-Zed</div>
</div>

只需添加包含该段落的div即可

white-space: nowrap
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;

还请确保，直接的封闭元素具有固定的宽度，并且要应用省略号的跨度具有display:block

对于我来说，我没有在内部div中设置它，而是在外部div中设置它，所以即使我有nowrap, overflow:hidden，和设置宽度，它也不起作用。代码如下:

<div className="outer">
<ToolTip>
<div className="inner"> long content needing to be cut
</div>
</ToolTip>
</div>