白い空白が100％の幅まで

Question

私は望むとおりに書式を設定しています。うまくいきます。私は親のdiv（クラスの親）にフィットするまでそれを折り返したいとは思わない。問題は、「VIDEO_TITLE_GOES_HERE」にもっと多くのテキストを収めるか、単に親divを縮小すると、空白のためにテキスト全体が画面から外れる：inner divの上のnowrap。どのように私は両方の方法でこの作品を作ることができますか？

.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の幅よりも小さくなるまでのテキストが折り返さないようにしたいように思えますか？ 1つのコメントのように、white-space: nowrapのすべての出現を削除することができます。あなたがそれらを必要とする理由はありますか？

フィドル：https://jsfiddle.net/zfbfe41h/