空白 nowrap 直到 100% 宽度答案

【问题标题】：white space nowrap until 100% width空白 nowrap 直到 100% 宽度
【发布时间】：2017-11-02 22:08:53
【问题描述】：

我已经根据需要格式化了一些文本，并且效果很好。我不希望它在适合父 div（父类）之前包装。问题是，如果我将更多文本放入“VIDEO_TITLE_GOES_HERE”或只是缩小父 div，则整个文本将因为 white-space: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>

【问题讨论】：

你的问题我不清楚。但是，如果您希望 ms-player-upnext-title-wrap 和 ms-player-upnext-timer-wrap 中的文本仅在触及页面边框时换行，只需从代码中删除每个 white-space: nowrap;。

标签： html css whitespace

【解决方案1】：

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

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

【讨论】：