Question

我已根据需要格式化了一些文本，但效果很好。我不希望它包装，直到它适合父div（类父）。问题是如果我将更多文本放入“VIDEO_TITLE_GOES_HERE”或简单地缩小父div，整个文本将因为白色空格而离开屏幕：nowrap在内部div上。我怎样才能使这项工作双向发挥？

.wrap {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
}

.ms-player-upnext-wrap {
  position: absolute;
  color: #333;
  font-size: 20px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.ms-player-upnext-title-wrap {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

.ms-player-upnext-title-wrap span {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.ms-player-upnext-timer-wrap {
  white-space: nowrap;
  display: inline-block;
}

.ms-player-upnext-timer-wrap span {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.ms-player-upnext-timer-time {
  font-weight: 600;
}

.ms-player-upnext-timer-stop {
  color: #ed7c32;
  border: 1px solid #ed7c32;
  border-radius: 5px;
  padding-left: 20px!important;
  padding-right: 20px!important;
  cursor: pointer;
}

.ms-player-upnext-playnow {
  position: absolute;
  white-space: nowrap;
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 20px;
  top: 50%;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  padding-right: 10px;
}

<div class="parent">

  <div class="ms-player-upnext-wrap">

    <div class="ms-player-upnext-title-wrap">
      <span class="ms-player-upnext-video-title-pre">Up Next:&nbsp;</span>
      <span class="ms-player-upnext-video-title">VIDEO_TITLE_GOES_HERE&nbsp;-&nbsp;</span>
      <span class="ms-player-upnext-video-status ms-status-not-viewed">Not Viewed</span>
    </div>

    <div class="ms-player-upnext-timer-wrap">
      <span class="ms-player-upnext-timer">Video will play automatically in:</span>
      <span class="ms-player-upnext-timer-time">&nbsp;10s&nbsp;</span>
      <span class="ms-player-upnext-timer-stop">Stop</span>
    </div>

  </div>

</div>

Answer 1

我可能会误解你的问题，但似乎你希望文本在视口小于div.ms-player-upnext-wrap的宽度之前不会换行？就像一条评论所说，您可以删除white-space: nowrap的每一次出现。你需要那些原因吗？

小提琴：https://jsfiddle.net/zfbfe41h/

白色空间nowrap直到100％宽度

1 个答案: