我试图制作类似于this
的股票代码css我正在寻找的是让自动收报机缩短名称,使用超过一定长度的省略号并切断姓氏。
我目前的问题是它不会切断名称,只是用椭圆缩短它们以适应div。我不知道为什么会发生这种情况,因为我使用的是flex-box:nowrap。
我目前的代码:
html,
body {
height: 100%;
background-color: #231C18;
}
body {
-webkit-font-smoothing: antialiased;
}
.content {
flex: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
overflow: auto;
width: 100%;
align-self: center;
display: block;
}
.container {
background-color: #1A1411;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0 auto;
flex: 1;
padding: 15px 25px 0 25px;
box-sizing: border-box;
width: 100%;
max-width: 300px;
align-self: center;
}
.ticker {
background-color: #342E29;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
height: 20px;
margin-top: 12px;
}
.item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 75px;
margin-left: 5px;
margin-right: 5px;
}

<div class="content">
<div class="container">
<div class="ticker" id="ticker">
<div class="item">
first item
</div>
<div class="item">
very long item
</div>
<div class="item">
third item
</div>
<div class="item">
forth item
</div>
</div>
</div>
</div>
&#13;
由于