テキストが親の幅に適応しないようにするにはどうすればよいですか？

Question

親の幅が変更されたときにテキストが適合するのを防ぐ方法を知りたかっただけです。下のコードを実行してdivの上にマウスを置くと、テキストが変更されているときに親の幅にテキストがどのように適応するかを見ることができます。これは私が避けたいものです。私が期待することは、テキストが最初のプロパティを保持していることです（ユーザーが左にスワイプしてテキストが左に消えたときにこの "効果"がトリガーされるため、最終的に一部のテキストが消えたり、 。ご協力ありがとうございました！

.hello { 
 
    background: red; 
 
    border-radius: 20px; 
 
    transition: 2s; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.hello:hover { 
 
    width: 20%; 
 
}

<div class="hello"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque 
 
    nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. 
 
</div>

Answer 1

私が縮小から、.STATIC-コンテナを防ぐことができますので、私は、静的な幅を設定します..しかし、100％でこれに回避策を働くことになりますように、それは、ダイナミックではありませんmedia queries、それが応答にするために...

.hello { 
 
    background: red; 
 
    border-radius: 20px; 
 
    transition: 2s; 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow:hidden; 
 
} 
 

 
.hello:hover { 
 
    width: 20%; 
 
} 
 
.static-container{ 
 
width:400px; 
 
    
 
}

<div class="hello"> 
 
    <div class="static-container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque 
 
    nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. 
 
    </div> 
 
</div>

Answer 2

あなたはabsoluteポジショニング

.hello { 
 
    background: red; 
 
    border-radius: 20px; 
 
    transition: 2s; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.hello:hover { 
 
    width: 20%; 
 
} 
 

 
.innerText { 
 
    position: absolute; 
 
}

<div class="hello"> 
 
    <div class="innerText"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque 
 
    nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. 
 
    </div> 
 
    
 
</div>

Answer 3

.hello { 
 
    background: red; 
 
    border-radius: 20px; 
 
    transition: 2s; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.hello:hover { 
 
    width: 20%; 
 
} 
 
p{ 
 
    position:absolute; 
 
}

<div class="hello"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque 
 
    nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. 
 
    </p> 
 
</div>

と親の内側に新しいdiv要素を作ることができます3210

Answer 4

希望します。

.hello { 
 
background: red; 
 
border-radius: 20px; 
 
transition: 2s; 
 
width: 100%; 
 
height: 200px; 
 
overflow: hidden; 
 
} 
 

 
.hello:hover { 
 
width: 20%; 
 
white-space: nowrap; 
 
text-overflow: ellipsis; 
 
}

<div class="hello"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque 
 
    nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. 
 
</div>