Html 使用CSS对文本进行最小边框包围

如何使用CSS和HTML实现这一点

由彩色边框包围的带边框文本

带边框文本的边框最小限度地围绕文本

带边框的文本具有最大宽度

带边框文本的边框不与相邻元素重叠

渲染时，它应该如下所示：

对于我使用的边界：

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

如果将CSS应用于

，则边框与浏览器窗口一样宽。我希望边框仅与文本一样宽（根据文本大小而变化），因此使用

width

设置绝对宽度是行不通的。我试过显示：内联，但是没有。我还尝试将上述CSS应用于

中包含的

，但当文本太长且换行时，这不起作用

---

听起来像是一张桌子。。。哦，我可以看到评论和反对票已经来了。“表格仅用于表格数据”。。。是的，我知道，但它们也是实现steve想要的功能的一种qnd方式。

您尝试过使用CSS属性float吗？指定float:left会使包含元素的宽度根据文本进行调整-看起来像是一种次要效果，但它可以工作

如果不希望包含的元素对齐，可以添加
标记，也可以向样式中添加“clear:both；”

---

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

您可以通过使高亮显示的段落作为块元素向左浮动（默认情况下，

将高亮显示的段落最小化地围绕文本）。然后，将段落移至
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;
}

这将导致高亮显示的段落的宽度仅为其文本所需的宽度，并将确保现有段落不会与高亮显示的段落水平重叠。
IE6/关于内联块的跨浏览器内容：如果您这样做，可以添加clearfix以避免额外的标记。（）注意：

标记不会阻止元素排列，除非您对它们应用一些基本的CSS：
br{clear:left；}
我将划掉标记引用-问题是关于CSS的：）