- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I want to break the text to fit in a maximum area but the area is dynamic and so is the amount of text. I’m having rough time putting it in words so I think this image will help
The image shows how I want it to be but since the div’s size and the text’s length are both dynamic; on some resolutions the text breaks down and pushes the button off the div.
Is there any way I can make the text break right on the last line before it gets to the button?
.div {
position: relative;
width: 100%;
height: 44vh;
display: inline-block;
}
.text {
font-size: 100%;
text-align: left;
margin-top: 5px;
margin-left: 15px;
margin-bottom: 0px;
word-wrap: break-word;
}
#Button {
font-size: 1vw;
text-align: center;
display: inline-block;
background-color: green;
padding: 15px;
margin-top: 15px;
cursor: pointer;
}
the area is dynamic and so is the amount of text.
JavaScript is needed to calculate the specific height (or maybe length) of the text in relation to the height of the container.
With CSS – using calc
setting a max-height
, and overflow: hidden
on .text
– will only get you so far.
But how would I calculate it live with the window resizing? just repeat the function every X ms ?
Window resizing in javaScript with setting EventListeners using onresize
event and maybe window.matchMedia
. But I don’t know exactly what it is that you after, so maybe if you adept the demo, try things with javaScript, and/or give some further explanations that could make things more clear. Also to get help from javaScript experts over here, of which I am not one.