带有HTML和CSS的可扩展花括号

Question

有没有一种简单的方法来模拟LaTeX中使用HTML和CSS cases提供的环境amsmath？

例如,在LaTeX中,可以写:

\documentclass{article}

\usepackage{amsmath}

\begin{document}

\[
\text{2014-01-05} \quad
\begin{cases} \text{Lorem ipsum \ldots} \\
\text{Lorem ipsum \ldots} \\
\text{Lorem ipsum \ldots} \\
\end{cases}
\]

\end{document}

产生:

我希望能够在HTML和CSS中做同样的事情.

所以,到目前为止,我已经尝试过了(见上JSFiddle):

HTML:

<div id="blog-post-date">
2013-07-01
</div>

<div id="blog-post-brace">
<span style="font-size:700%">{</span>
</div>

<div id="blog-post-content">

    <div id="blog-floater"></div>

    <div id="blog-post-content-child">

        <p>Title: <a href="http://stackoverflow.com"> Blog about stackoverflow with a really, really, really, really, excessively long title in order to demonstrate a problem </a></p>

        <p>Categories: website, help</p>

        <p>Tags: HTML, CSS</p>

    </div>

</div>

和CSS:

/*
body{
        font-family: "Palatino Linotype", Palatino, serif;
}
*/

#blog-post-date{
        display:inline-block;
        width: 5em;
        height: 10em;
        line-height: 10em;
        text-align: center;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-weight:900;
}

#blog-post-brace{
        display: inline-block;
        width: 2em;
        height: 10em;
        line-height: 10em;
        text-align: center;
        overflow: hidden;
        margin: 0;
        padding: 0;
}

#blog-post-content{
        position: relative;
        display: inline-block;
        width: 20em;
        height: 10em;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-size: small;
}

我希望使用这种样式来在博客页面上显示博客文章的元数据.然而,到目前为止我所尝试的有一些问题.

1. 首先,当博客文章的标题(或任何行,真的)变得过长时,它会遇到问题.在{当前设置为一个固定的大小,并且不与动态的博客文章中的元数据扩展.这可以在JSFiddle示例中看到,其中"Tags"行现在位于花括号的底部下方.如果动态的调整是不可能的,我会很愿意接受white-space: nowrap;,overflow: hidden;和text-overflow: ellipsis;-ing博客文章的元数据,并且仅仅有元数据的长度无关三行文本.

2. 我的代码似乎也依赖于字体.如果取消注释JSFiddle示例中 CSS部分顶部的字体更改,您将看到更改字体后,花括号的中间不再与帖子的日期对齐.

3. 括号缩放的方式可以制作一个非常难看的括号,至少在当前示例的字体中.(也许这个问题和这个答案有帮助？)

因此,我的问题是,是否有办法解决我迄今为止尝试过的问题,以解决这些问题,或者是否有更好的方法来使用HTML和CSS.优选地,该解决方案仅使用HTML和CSS.

Answer 1

您可以使用CSS border-image轻松完成此操作.你只需要一个:before假元素就可以将卷曲的中间位置放在那里,使它的缩放非常好.

问题可能是浏览器支持.虽然MDN报告了IE9的核心功能,但其他人说这是IE11及以上版本.从我在MDN上看到的,旧的IE应该(带-ms前缀)支持这种情况下你需要的所有功能.

编辑: IE11,FF和Chrome中的工作示例.遗憾的是,它在IE10及以下版本中一团糟.