使用CSS最小化边框文本边框

Question

如何使用CSS和HTML执行此操作？

1. 由彩色边框包围的边框文字
2. 有边框的文字边框最低限度地围绕文字
3. 有边框的文字有最大宽度
4. 有边框的文字边框不会与相邻元素重叠

渲染时，它看起来应该是这样的：



对于我正在使用的边界：

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

如果我将CSS应用于<p>，则边框与浏览器窗口一样宽。我希望边框只能与文本一样宽（变量取决于文本大小），因此使用width设置绝对宽度不起作用。我尝试了display:inline，但causes spacing issues with neighboring elements。我还尝试将上述CSS应用于<span>中包含的<p>，但是当文本太长并且包装时，这不起作用。

Answer 1

您是否尝试过使用名为float的CSS属性？指定float：left会导致包含元素的宽度调整为文本 - 看起来像是次要效果，但它可以正常工作。

如果您不希望排列元素，，您可以添加＆lt; br /＆gt;标签或你可以添加“clear：both;”风格。

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

Answer 2

通过将突出显示的段落作为块元素向左浮动（默认情况下为<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

对我来说听起来像是一张桌子......哦，我已经可以看到评论和投票了。 “表格只适用于表格数据”......是的，我知道，但它们也是一种完全符合史蒂夫想做的方式。

Answer 5

显示怎么样：内联块？