HTML和CSS可扩展卷曲

概述有没有一种简单的方法来模拟LaTeX中使用 HTML和CSS的amsmath提供的案例环境？ 例如,在LaTeX中,可以写： \documentclass{article}\usepackage{amsmath}\begin{document}\[\text{2014-01-05} \quad\begin{cases} \text{Lorem ipsum \ldots} \\\t 有没有一种简单的方法来模拟LaTeX中使用 HTML和CSS的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 >{</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部分顶部的字体更改,您将看到在@R_304_6502@后,大括号的中间不再与帖子的日期对齐.
>括号被缩放的方式可以使一个非常丑的括号,至少在当前所示的示例字体中. (也许this question和this answer可以帮助？)

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

解决方法 您可以轻松地使用这个 CSS border-image.你只需要一个：在伪元素之前,将中间位置的卷曲放在那里,使它变得非常好.

问题是潜在的浏览器支持.虽然MDN报告的核心功能是在IE9 others say it’s IE11 and up中工作.从MDN上看到的旧IE应该(以-ms前缀)支持您所需的所有功能.

编辑：
Working example in IE11,FF and Chrome.令人遗憾的是,IE10及以下版本是一团糟.

总结

以上是内存溢出为你收集整理的HTML和CSS可扩展卷曲全部内容，希望文章能够帮你解决HTML和CSS可扩展卷曲所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。