How can I make my <p> not extend out so far?

Hey there, I've added a <p> with some pretty long text inside of it how can I correctly make the width of it smaller?

26 Replies

ROP•16mo ago

As you see in the img the text stretchs out could I just add a width on it to fix it? or is there a better way

There are a number of ways that people will tackle this. one of my preferred ways is just to set a max-width: 60ch; on all of your text elements i.e.

h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{ 
  max-width: 60ch;
}

h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{ 
  max-width: 60ch;
}

this ensures that users dont have mental overload trying to piece lines together when they are super long

ROP•16mo ago

Thank you! Just a question, What does the "ch" stand for?

Coder_Carl•16mo ago

All G. its a heavy handed approach but this way I never need to think about it. I tend to just use a css reset on all of my projects to ensure I am working with a clean slate with base accessibility considerations. its definitely not needed everywhere but 🤷 so far I've found them used in any project Ive worked on professionally this is my personal one

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Limit line sizes */
h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{ 
  max-width: 60ch;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  font-weight: 400;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Limit line sizes */
h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{ 
  max-width: 60ch;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  font-weight: 400;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Coder_Carl•16mo ago

ch stands for character https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units

MDN Web Docs

CSS values and units - Learn web development | MDN

This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page — you will encounter many of these in use as you work through these lessons.

ROP•16mo ago

I assumed it stood for character I've been usin ChatGPT to just answer some smaller questions here and there and well it's AI so it's not perfect it told me I was wrong Im still new to HTML/CSS and I've been trying to get the hang of it but I screw up pretty often then I'll ask the question and get help and realize it was easy but I just did it wrong

Coder_Carl•16mo ago

yer chatGPT has some good answers and some really stupid ones like it suggested to me to use a css var inside of a keyframe animation when I told it to never suggest that again, it proceeded to do it again

ROP•16mo ago

😂

Coder_Carl•16mo ago

naw, there is just a berth of knowledge that you absorb over time through mistakes. you never do css wrong, just different. you will also find a sweet spot in relation to your code length and verbosity to ensure its maintainable and readable keep it up

ROP•16mo ago

appreciate it! Hey If you can help me with another thing

ROP•16mo ago

This section of the page, I wanted to move the text a little more to the right and then have a section next to it that says "skills" with the "HTML" and CSS" under it Here's a crappy illustration

ROP•16mo ago

Coder_Carl•16mo ago

different questions should be posted in a new post. but this one time 👍

ROP•16mo ago

oh you're right my bad lol

Coder_Carl•16mo ago

all G. have you learnt about grid and flexbox yet?

ROP•16mo ago

Not fully I have a small idea of it but I definetly could work on it more Honestly, The reason Im evening creating a Portfolio is because in around two months I have the oppertunity to visit the Snapchat HQ for a fieldtrip my highschool coding class is allowing us to go to So If I can present myself and tell them what I would like to do and possibly get an internship it'll be amazing Plus the college near me has the traditional route of making you a software engineer so if I cant have some sort of job/internship by college I would change to become a software engineer it'll make life easier as they support it more and offer interships and I would enjoy it anyway

Coder_Carl•16mo ago

this is a super basic example https://codepen.io/CA-Carl/pen/VwRKoyR flex requires you to deal with each child, while grid sets up the spaces and decides what goes where they can both do what you need easily enough.

ROP•16mo ago

Cant wait till I reach the level of yours and a few others

Coder_Carl•16mo ago

have added a suggestion in the code pen for your <main> content and how to keep it within a reasonable size

ROP•16mo ago

also, in case you'd like to see the current codepen I have for the portfolio

ROP•16mo ago

here you are https://codepen.io/hrphyn/pen/PoLzbVB

hrphyn

CodePen

Portfolio

...

Coder_Carl•16mo ago

I have suggestions, can move into a chat if you wanted to hear

ROP•16mo ago

If you have any suggestions you can give me sure

Coder_Carl•16mo ago

voice-chat or pm?

ROP•16mo ago

Would Pm be fine?

Gaming

Programming

How can I make my <p> not extend out so far?

Did you find this page helpful?