使用 HTML 和 CSS 扩展大括号

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

例如，在 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 http://jsfiddle.net/ypxUa/):

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>

And 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 example http://jsfiddle.net/ypxUa/，其中“标签”行现在位于大括号底部下方。如果动态缩放是不可能的，我愿意接受white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis;- 获取博客文章的元数据，并且只包含三行文本，无论元数据的长度如何。

2. 我的代码似乎也依赖于字体。如果您取消注释 CSS 部分顶部的字体更改JSFiddle example http://jsfiddle.net/ypxUa/，您会看到更改字体后大括号的中间不再与帖子的日期对齐。

3. 括号的缩放方式可能会导致括号相当难看，至少在当前示例的字体中是这样。 （也许这个问题 https://stackoverflow.com/q/20700815/2571049 and 这个答案 https://stackoverflow.com/a/20745967/2571049有帮助？）

因此，我的问题是是否有一种方法可以解决我迄今为止所尝试的问题，或者是否有更好的方法来使用 HTML 和 CSS 来解决这些问题。优选地，该解决方案将only使用 HTML 和 CSS。

你可以轻松地做到这一点CSS 边框图像 https://developer.mozilla.org/en-US/docs/Web/CSS/border-image。你只需要一个:before伪元素将卷曲的中间部分放在那里，使其缩放得非常好。

问题可能在于浏览器支持。虽然 MDN 报告核心功能从 IE9 开始运行，其他人说是 IE11 及更高版本 http://caniuse.com/border-image。从我在 MDN 上看到的来看，旧的 IE 应该（与-ms前缀）支持这种情况下所需的所有功能。

edit: IE11、FF 和 Chrome 中的工作示例 http://jsfiddle.net/Curry/5tCrE/1/。遗憾的是在IE10及以下版本下就很乱了。