CSS 文本的动态最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14191254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic maximum width for text
提问by Emphram Stavanger
So let's say I have this markup;
假设我有这个标记；
<div>
<span>Text one</span>
<span class="sticky">ABC</span>
</div>
<div>
<span>Some other text</span>
<span class="sticky">DEF</span>
</div>
<div>
<span>Lorem dolor sit amet lorem ipsum dolor</span>
<span class="sticky">GHI</span>
</div>
Which would - with accompanying CSS - yield a result like pictured below.
这将 - 伴随着 CSS - 产生如下图所示的结果。
However, the problem occurs when the text in the first spanis longer than the allotted width of the div. Regularly what happens is just normal text wrapping; the second spanis bumped to the end of the second row.
但是，当第一个中的文本span长于div. 通常发生的只是普通的文本换行；第二个span被撞到第二行的末尾。
However, I want this element to be just a single row. Now, of course to achieve this, you do;
但是，我希望这个元素只是一行。现在，当然要实现这一目标，您可以这样做；
white-space: nowrap;
overflow: hidden;
But then what happens is the second spandisappears into oblivion, as it's driven away by the length of the text in the first span.
但是随后发生的事情是第二个span消失了，因为它被第一个中的文本长度赶走了span。
What I'd want to achieve is what is pictured in the third example below. When the content of the first spanis too long to be displayed, text-overflow: ellipsis;would cut the string with a dot-dot-dot, and the second spanwould be pushed to the very right edge (paddingof the divallowing).
我想要实现的是下面第三个示例中的图片。当的内容首先span是太长显示，text-overflow: ellipsis;将削减该字符串以点-点-点，第二个span会推到最右侧边缘（padding在的div允许）。
Essentially, the pseudo-max-widthof the first spanwould be equal to the width of the div, excluding its paddingand deducting the width of span.sticky, whatever that may be (as the content of it may vary, so the width is not set).
本质上，第一个的伪max-width-span将等于 的宽度div，不包括其padding并减去 的宽度span.sticky，无论它是什么（因为它的内容可能会有所不同，因此宽度未设置）。
I don't know if max-widthis actually the way to go when approaching something like this, but it's what I can use to best describe the behavior I want.
我不知道max-width在处理这样的事情时是否真的要走，但这是我可以用来最好地描述我想要的行为的方法。
Is there a non-JS method of achieving this?
有没有非 JS 的方法来实现这一点？
采纳答案by DMTintner
This can definitely, and should be done in CSS. Apply a fixed width and fixed height on the first span. The height keeps it from stretching to multiple lines. The .sticky span then can be positioned afterwards. This can even be made fluid, using percents or ems. Something to consider, I don't know the context of the 'ABC', 'DEF', but they might better be applied using a :before or :after pseudo class if they're purely visual and not structural elements.
这绝对可以，并且应该在 CSS 中完成。在第一个跨度上应用固定宽度和固定高度。高度可以防止它拉伸到多条线。然后可以定位 .sticky 跨度。甚至可以使用百分比或 em 使之变得流畅。需要考虑的事情是，我不知道“ABC”、“DEF”的上下文，但如果它们是纯粹的视觉元素而不是结构元素，则最好使用 :before 或 :after 伪类来应用它们。
Here's a quick example:
这是一个快速示例：
div {
width: 200px; /* some amount that you set */
}
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */
display: inline-block; /* so height and width actually take affect */
max-width: 80%;
height: 1em; /* so overflow hidden works and keeps text on one row */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}
span.sticky {
display: inline-block;
width: 20%;
}
If you want to see this working on a live site, I did this design on moolta.com. Click on 'make a challenge' and open the modal to choose a friend. The li's inside of the dropdown list are what I'm talking about. They had to become elipsis and have a button follow them, without breaking lines
如果你想在一个实时网站上看到这个工作，我在 moolta.com 上做了这个设计。单击“发起挑战”并打开模式以选择朋友。下拉列表中的 li 就是我正在谈论的内容。他们必须成为省略号并有一个按钮跟随他们，而不会断线
回答by Mikhail Vladimirov
<html>
<head>
<style>
.left {
max-width: 200px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="left">
<div class="right">FOO</div>
Lorem
</div>
<br />
<div class="left">
<div class="right">FOO</div>
Lorem ipsum
</div>
<br />
<div class="left">
<div class="right">FOO</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</body>
</html>
