-1

body {
    max-width: 300px;
}

.highlight {
    background-color: #ee3;
    display: flex;
}
<div>
Lorem ipsum<p class="highlight">lorem ipsum</p>
Lorem ipsum
</div>

I like that the p inside div creates new lines that separate between each paragraph rather than the span that doesn't. But I want the highlighted text don't expands to the entire element. I'm trying to find out with several display properties but i'm stuck.

Thank you

amusakbar
  • 27
  • 5
  • 2
    Wrap the entire line of text in `p` tag, use `span` to highlight the bit you want – Dale Oct 11 '22 at 11:43
  • 2
    Don't post image of code. Please check [How do I ask a good question ?](https://stackoverflow.com/help/how-to-ask) and how to create a [minimal reproductible example](https://stackoverflow.com/help/minimal-reproducible-example) – Cédric Oct 11 '22 at 12:02

2 Answers2

1

The more natural approach would be to wrap your highlight-class around the text-piece with a span inside the paragraph. Then you can get rid of display:flex for the class, like so:

body {
    max-width: 300px;
}

.highlight {
    background-color: #ee3;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Page title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <p>Lorem ipsum kghasghasg <span class="highlight">jkashakdh hakskd uhasd a</span> jkashd ajks oaiudsgoaiudsgo aisdgoaasd hajgds kahsdgkahdjgakjhdsg
            </p>
        </div>
    </body>
</html>
Kai
  • 44
  • 4
-1

To answer EXACTLY to your question (and keep the paragraph around the yellow-background element: You could use a span inside the p tag and inline-flex instead of flex for the highlight-class. Like so:

body {
    max-width: 300px;
}

.highlight {
    background-color: #ee3;
    display: inline-flex;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Page title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            Lorem ipsum kghasghasg
            <p>
                <span class="highlight">
                    jkashakdh hakskd uhasd a
                </span>
            </p>
            jkashd ajks oaiudsgoaiudsgo aisdgoaasd hajgds kahsdgkahdjgakjhdsg
        </div>
    </body>
</html>
Kai
  • 44
  • 4
  • In your example, you don't need `span` inside of `p` as there is no other text, put the class straight on the `p` element - you can also use `font` tags to remove the need for displays or things like that. `span` also doesn't need a display – Can O' Spam Oct 11 '22 at 12:05
  • glad to be of help @amusakbar – Kai Oct 11 '22 at 12:06
  • @CanO'Spam in case the p is needed around the highlight-text (for whatever reason), the display property is needed i guess. If removed, the background will span to end of the line an amusakbar is back were he was. – Kai Oct 11 '22 at 12:15
  • 1
    @CanO'Spam I'm trying to keeping the lines of each paragraph still there. Kai 's answer worked for me. But I'm happy that your answer is insightful for new learner like me. Thank you for helping me out :) – amusakbar Oct 11 '22 at 13:12