使用css的最小包围文本边框

您尝试过使用名为float的css属性吗?指定float:left会使包含元素的宽度调整为文本-这看起来像是一个次要的效果,但它是有效的。

如果不想让包含元素排成一行, 您可以添加标签或 您可以在样式中添加“clear:both;”。

我肯定认为这是可以实现的-你只需要找到属性/值的正确组合。

通过使突出显示的段落作为块元素向左浮动,可以使突出显示的段落最小限度地围绕文本。( <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>

只要添加

p.highlighted {
    float: left;
}

p {
    clear: both;
}

这将使突出显示的段落的宽度仅与文本要求的宽度相同,并确保现有段落不会与突出显示的段落水平重叠。

对我来说就像一张桌子…哦,我可以看到评论和投票已经开始了。”表格仅用于表格数据“…是的,我知道,但他们也是一个做史蒂夫想做的事情的第二种方式。

显示:内联块怎么样?