文本不應該在父元素寬度的變化上對齊

Question

我在div中有簡單的p元素。

我想要的是p中的文本不應該對齊div寬度的變化。

一樣，如果div的寬度爲100vw，然後下降到20vw（有一些動畫），則文本應該是一樣的（隱藏溢出）之前，意味着文本不應該在明年會結盟線等。

我試過在p中使用position:fixed，但後來overflow-x:hidden不起作用。

Answer 1

您正在尋找的財產是white-space。當父母div的寬度減小

div { 
 
    background: #fff; 
 
    overflow: hidden; 
 
    border: 1px solid; 
 
    margin-bottom: 20px; 
 
} 
 

 
.a { 
 
    width: 200px; 
 
} 
 

 
.b { 
 
    width: 50px; 
 
} 
 
p { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="a"> 
 
    <p>This is some text.</p> 
 
</div> 
 

 
<div class="b"> 
 
    <p>This is some text.</p> 
 
</div>

Answer 2

嘗試增加white-space: pre您p元素，您可以將其設置爲nowrap爲您p元素文本不換行。

編輯： Sinstein的解決方案使用上述作品white-space: nowrap如果你想保持所有文本的只有一行。如果要保留現有換行符，則應使用pre。