I have a lengthy phrase that takes up too much space on mobile devices. Here is an example:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.container {
width: 100%;
height: 100%;
}
.text {
/*
* Don't want to change font-size, because text
* sometimes may be shorter and 2.2rem is perfect
* for phrases that are not as long
*/
font-size: 2.2rem;
}<body class="artificial-phone-viewport">
<div class="container">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</div>
</body>My goal is to limit the height of this text to 10rem at most. If it exceeds 10rem in height, it should overflow horizontally like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
white-space: nowrap;
}<body class="artificial-phone-viewport">
<!-- Deleted container to reduce code, but it spans
100% width and height of its parent -->
<div class="text">
Lorem ipsum dolor, sit amet consectetur<br/>
adipisicing elit. Temporibus saepe illum<br/>
a magni sequi error fugit dolore neque<br/>
voluptates in laborum.
</div>
</body>Note: The example provided above is just for illustration purposes. I do not want any line breaks or the use of 'white-space: nowrap'. Additionally, I prefer the text to overflow its parent so I can handle scaling with JavaScript if needed, although this detail is not crucial to the main question.