相关疑难解决方法(0)

我有容器flex.我希望中间孩子占据整个空间,所以我设置它flex: 1.到现在为止还挺好.

下一个级别是中间孩子有2个孩子所以我也想设置它灵活(如果你失去了我,只是跳到片段)和第一个孩子我设置省略号样式.现在,省略号停止工作.

如果你点击按钮,你会发现短文的一切都很好;

有任何想法吗？

function toggle() {
  var el = document.querySelector('.el');
  el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}

.wrapper {
  display: flex;
  width: 200px;
  align-content: stretch;
  padding: 5px;
  min-width: 0;
  border: 1px solid
}

.wrapper .child2 {
  flex-grow: 1;
}

.flex {
  display: flex;
  min-width: 0;
}

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

.child3 {
  background: …

在下面的html设计中,我想将文本溢出应用于省略号,用于媒体播放和备注标签,并希望第一行播放的媒体(第一个大行)和备注(第二个bing行)将继续下一个线.播放和停止以及媒体播放和备注都应该属于同一行.你能帮帮我吗？

.oneline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#player-play, #player-stop
{
   display: inline-block;
   width: 48px;
   height: 48px;
}
#player-play
{
    background-image: url('../images/play.png');
}
#player-stop
{
   background-image: url('../images/stop.png');
}


 <div  id="player" data-role="header">
        <div data-role="navbar">
            <ul>
                <li class="oneline">
                    <a href="#" id="player-play" title="Play / Pause" style="float:left" ></a>
                    <a href="#" id="player-stop" title="Stop" style="float:left" ></a>
                    <label id="media-played" class="oneline">first big line first bing line first bing line first big line</label>
                    <label id="remarks">second big line second big line second big line second big line</label>
                </li> …