CSS borderline minimally text

Question

How can I do this using CSS and HTML?

1. Limited text surrounded by a colored border
2. Bordered text border minimally surrounds text
3. Limited text has maximum width
4. Border of text with a border does not overlap adjacent elements

When rendering, it should look something like this:

For the border, I use:

padding: 1.0em;
border-style: solid;
border-width: 2px;
background-color: #FFFFCC;
border-color:#E8E800;

CSS <p>, , . , , ( ), width . display:inline . CSS <span> <p>, , .

Answer 1

CSS, float? float: left , - , .

, , , < br/ > "clear: both;" .

- /.

Answer 2

, , float ( <p>). clear:left, .

CSS:

.pars {
    /* this is used to prevent the last floating element 
    from causing issues below the paragraph (.pars) container */
    width: 100%;
    overflow: visible;
}
.pars p {
    clear: left;
    margin: 0 0 0.5em 0;
}
.pars .highlighted {
    float: left;
    padding: 1.0em;
    border-style: solid;
    border-width: 2px;
    background-color: #FFFFCC;
    border-color:#E8E800;
}

HTML:

<div class="pars">
   <p>Some paragraph text</p>
   <p class="highlighted">Some bordered text</p>
   <p class="highlighted">Some more bordered text</p>
   <p>Some very long bordered text blah blah blah 
   blah blah blah blah blah blah blah blah blah blah</p>
</div>

Answer 3

p.highlighted {
    float: left;
}

p {
    clear: both;
}

, , , , .

Answer 4

sounds like a table to me ... oh, I can see comments and descending voices. "Tables are for tabular data only" ... Yes, I know, but they are also a qnd way to do what Steve wants.

Answer 5

how about display: inline unit?