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
Zakum
Zakum•15mo ago
you can add max width, i.e.
.tiny-paragraphy {
max-width: 30ch;
}
.tiny-paragraphy {
max-width: 30ch;
}
or do you mean you only want 1 letter per line?
ironman
ironman•15mo ago
i tried max width and its working however i have it not expanding height
ironman
ironman•15mo ago
i tried overflow-wrap and it behaves like position aboslute...
No description
ironman
ironman•15mo ago
the second one i manually added spaces
Jochem
Jochem•15mo ago
you want either word-break or overflow-wrap with break-word
ironman
ironman•15mo ago
bot of them do this
No description
Jochem
Jochem•15mo ago
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
ironman
ironman•15mo ago
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; } } }
Jochem
Jochem•15mo ago
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)
ironman
ironman•15mo ago
i didnt know underlines were a thing 😉
No description
Zakum
Zakum•15mo ago
yeah codepen would be ideal and takes like 3 minutes, i cant just look at css and visualize it 1:1 laugh 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 grid
ironman
ironman•15mo ago
this is just inside the message-container i would want the height of the whole container to expand
Jochem
Jochem•15mo ago
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
ironman
ironman•15mo ago
thx tho il try it
Zakum
Zakum•15mo ago
yeaa it'll be impossible without at least the html as well
Want results from more Discord servers?
Add your server