New line in a paragraph, expanding height
How do you make a long string of 'aaaaaaaa'
fit into a paragraph only expanding height ,without it going over and expanding width ?
15 Replies
you can add max width, i.e.
or do you mean you only want 1 letter per line?
i tried max width and its working however i have it not expanding height
i tried overflow-wrap and it behaves like position aboslute...
the second one i manually added spaces
bot of them do this
that looks more like a rest of the layout problem if I'm honest
can you share your code in a functional way? Code pen would be ideal
i have the max-height set to auto in the same component
.messages {
width: 19rem;
min-width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
// border: solid 1px black;
display: flex;
flex-direction: column-reverse;
.messagebody {
position: relative;
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
min-height: 11%;
padding: 0 3rem;
margin-top: 0.8rem;
// overflow-wrap: break-word;
word-break: break-all;
max-height: auto;
.messagetext-container {
display: flex;
width: 100%;
.messagetext {
border: solid black 1px;
padding: 0.18rem 0.3rem;
border-radius: 5px;
min-width: 3rem;
max-width: 5.8rem;
min-height: 1rem;
max-height: 100rem;
}
}
.text-right {
text-align: right;
justify-content: flex-end;
}
.text-left {
text-align: left;
justify-content: flex-start;
}
.messageabout {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
.messageuser {
font-size: 0.8rem;
}
.messagetimestamp {
font-size: 0.7rem;
}
}
.about-left {
left: 0;
}
.about-right {
right: 0;
}
}
}
can you put that in a code block at least? with the double underscores turning underline on and off it's impossible to read
also, it's much easier to help if we can see a live example, #how-to-ask-good-questions has some suggestions on how to share code
(and instructions on how to use code blocks)
i didnt know underlines were a thing 😉
yeah codepen would be ideal and takes like 3 minutes, i cant just look at css and visualize it 1:1 
mean this looks like a stacking context issue so id look at the
mean this looks like a stacking context issue so id look at the position: absolute first
i assume its supposed to look like an instant messaging app with timestamps? in which case there are better ways to format this than using position: absolute, such as using gridthis is just inside the message-container
i would want the height of the whole container to expand
like Zakum said, it's really hard to diagnose with just the CSS in a screenshot. You're going to a mechanic and only showing them pictures of half your car and asking them to fix the rattle you hear on the highway
thx tho il try it
yeaa it'll be impossible without at least the html as well