导致 CSS 网格列超出网站尺寸的文本？

Question

因此，CSS 网格内容列中的文本导致其超出网站尺寸，我尝试使用文本溢出、文本换行等来修复它，但似乎没有任何效果，是什么原因造成的？因为从视觉上看，文本在列边缘之前环绕，如我周围的调试蓝色边框所示。

HTML

<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>

CSS

.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%;
}

我尝试过以下方法。

溢出：隐藏；文本换行：预行；

Answer 1

将

grid-template-columns

类的

intro

属性更改为

1fr 1fr

而不是

50% 50%

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

导致 CSS 网格列超出网站尺寸的文本？

问题描述投票：0回答：1

1个回答

最新问题

导致 CSS 网格列超出网站尺寸的文本？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1