Question 244071 in Html Question posted in
Some basic documentation can be found here.

Html – Text causing CSS grid column to extend beyond the websites dimensions?

So the text in this content column for CSS Grid is causing it too expand beyond the websites dimensions, i’ve tried using text overflow, text-wrap etc… to fix it but nothing seems to be working, what’s causing it? because visually the text is wrapping before the edge of the column as can be seen in the debug blue border i have around it.

enter image description here

.main-content {
  display: flex;
  flex-direction: column;
}

.intro {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 15px;
}

.intro-image {
  border: 3px solid blue;
}

.intro-content {
  padding-right: 32px;
  border: 3px solid blue;
  overflow: hidden;
  white-space: normal;
}

.intro-image img {
  width: 100%;
  height: 100%;
}
<body>
  <main class="main-content">
    <section class="intro">
      <div class="intro-image">
        <img src="./images/Default_Beautiful_Concept_art_of_a_colorful_vibrant_crowded_ba_0_c8676a26-dadf-4751-aa00-27625fd75898_1.jpg">
      </div>
      <div class="intro-content">
        <p>
          Hey there, folks of GP and beyond! Hope you're all having a smashing day. If anything in my thread piques your interest, I believe we can make it even more fabulous together! Now, I'm not exactly a seasoned writer, though I did have my fair share of role-playing
          as a chatterbox kid (does that count?). But as a writer, I'm continually honing my craft. With each plot I dive into and every response I whip up, I can confidently say I'm getting better at this storytelling gig. Oh, by the way, I've discovered
          that I've got a penchant for playing female characters in RP. Not that I won't give male characters a whirl, mind you! But currently, my arsenal boasts more leading ladies than leading gents. However, if we're cooking up a fresh plot together,
          I'm game to play whichever gender strikes our fancy. Now, enough chit-chat; let's dive into the nitty-gritty! Preferences & Expectations: Time & Replies: I'm pretty flexible here. Whether you want to reply once a week or once a day, just give
          me a heads-up if things aren't working out. As for me, I typically aim for a response a day or every other day, but real life can throw curveballs, so I'll always keep you in the loop. Paragraphs Galore: How much we write depends on the scene
          and RP type. In a steamy, smut-filled scenario, short and sweet might be the order of the day. But when we're weaving intricate world-building tales, I'm all about those detailed, meaty responses. So, as a general rule, let's aim for more than
          just a few lines, okay? Partner Expectations: I'm all about co-creating our story. Be as creative and interactive as I am in the RP. Don't just answer; surprise me with new twists and turns! Feel free to add your own plot goodies, and don't
          fret about stepping out of the box I'll let you know if it doesn't jive. We're in this storytelling adventure together! Storytelling First: I'm not just here for a smut fest. Sure, mature themes can pop up, but the story takes the limelight
          unless we explicitly decide otherwise. Favorite RP Genres & Interests: Historical plots Sci-fi/Cyberpunk adventures Fantasy (any flavor) Slice-of-life with a sprinkle of smut (debatable, if the plot's great) Horror/Mystery (I'm intrigued, but
          it's a learning journey) ABSOLUTELY no sexual gore, scat, or extreme stuff, though! I don't commit to pairings or specific characters before diving into a plot. It's all about mood and what tickles my fancy at the time. So, if you've got an
          idea that lights my creative fire, I'm in, no matter the pairings. Check out my plots below for a taste of my style, and if you like what you see, hit me up! Oh, one more thing: if you've got your own plot in mind, take a sec to whip up an intro.
          It'll help me see what floats my boat and what I'd love to add to the mix. No offense intended, promise! Fandoms? Not my cup of tea, except for a handful of video game universes that allow for original characters: Dragon Age The Elder Scrolls
          Fallout Mass Effect Let's embark on a storytelling odyssey together!
        </p>
      </div>
    </section>
</body>

I have tried the following.

overflow: hidden;
text-wrap: pre-line;
Tags:

2

Answers


  1. 0

    Change the grid-template-columns property of the intro class to 1fr 1fr instead of 50% 50%

    .intro {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 15px;
}
    Login or Signup to reply.
  2. 0

    The statement grid-template-columns: 50% 50% creates two columns, 50% wide each. With column-gap: 15px, we get 50% + 50% + 15px for <section>‘s content, which is 15px wider than its own width, resulting in the visible overflow.

    Instead of having to calculate 50% - 15px/2 (or similar), we can distribute the space with fractional units fr.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search