我如何应用溢出到一个整体的div有一个div与文本里面?

Question

我用它的css设置了以下div:

.container {
width: 200px;
border: solid;
}
.copy {
white-space: nowrap; */
text-overflow: ellipsis;
overflow: hidden;
display: flex;
width: 150px;
}

<div class="container">
<div class ="copy">
Hello
&nbsp
<div class="name">
G. Antetokounmponoustias
</div>
, let's go.
</div>
<div>

我想要的是产生一些看起来像&;Hello G. Antetokounmponoust…&;，而不是&;Hello G. Antetok…，我们走吧。原因是我需要在媒体视口中截断名称或整个句子基础。

是否可以使用div ?

我能够成功地做到这一点与div和inline-block显示内的span，但对齐是关闭的，所以我切换到一个div。截断工作，它只是不显示一个省略号现在溢出。

Answer 1

没有div

.container {
width: 200px;
border: solid;
}
.copy {
white-space: nowrap; 
text-overflow: ellipsis;
overflow: hidden;
width: 150px;
}

<div class="container">
<div class ="copy">
Hello
&nbsp
G. Antetokounmponoustias
, let's go.
</div>
<div>

用div

.container {
border: solid;
width: 100vw;
display: flex;
flex-direction: column;
}
.copy {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

<div class="container">
<div style="min-width: 0; display: inline-flex;">
Hello
&nbsp
<div class="copy">
G. Antetokounmponoustias
</div>
, let's go.
</div>
<div>