例如,在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="https://stackoverflow.com"> Blog about stackoverflow with a 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;
}

我希望使用这种样式在博客页面上显示博客帖子的元数据.但是,迄今为止我所尝试过的还有一些问题.

>首先,当博客文章的标题(或任何行,真的)变得过长时,它会遇到问题. {目前设置为固定大小,不会动态扩展博客文章的元数据.这可以在JSFiddle example中看到,其中“标签”行现在位于大括号的底部.如果动态缩放是不可能的,我会愿意解决白色空间：nowrap; overflow：hidden;和text-overflow：省略号; – 博客文章的元数据,只有三行文本,不管元数据的长度.
>我的代码也似乎是字体依赖的.如果您取消注释JSFiddle example中CSS部分顶部的字体更改,您将看到在更改字体后,大括号的中间不再与帖子的日期对齐.
>括号被缩放的方式可以使一个非常丑的括号,至少在当前所示的示例字体中. (也许this question和this answer可以帮助？)

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