使用HTML和CSS的可扩展大括号 [英] Extensible curly bracket with HTML and CSS

问题描述

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

例如，在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>标题：< a href =http://stackoverflow.com>关于stackoverflow的博客有一个真正的，真的，真的，太长的标题为了证明问题< / a>< / p> 
 
< p>分类：网站，帮助< / p> 
 
< p>标签：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：hide; 
 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 示例中看到，其中标签行现在在大括号的底部之下。如果动态缩放是不可能的，我会愿意为 white-space：nowrap; ， overflow：hidden; ，和 text-overflow：ellipsis; - 博客帖子的元数据，只有三行文本，不管元数据的长度。

   / li>
   

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




3. 括号缩放的方式可能会造成一个很丑陋的括号，至少在当前的样例的字体中。 （也许此问题和此）

因此，我的问题是，是否有办法解决为了解决这些问题，或者是否有一个更好的方法去使用HTML和CSS这样做迄今为止。

解决方案

您可以轻松地使用 a href =https://developer.mozilla.org/en-US/docs/Web/CSS/border-image> CSS border-image 。你只需要一个：before 伪元素，把卷曲的中间位置放在那里，使它的规模真的很好。

问题是潜在的浏览器支持。虽然MDN报告的核心功能要像IE9一样工作，其他人说它是IE11及以上版本。从我在MDN看到的旧的IE应该（与 -ms 前缀）支持所有的功能，你需要为这种情况下。

edit：
IE11，FF和Chrome中的工作示例。遗憾的是它在IE10及以下是一团糟。

Is there an easy way to emulate the cases environment provided by amsmath in LaTeX with HTML and CSS?

For example, in LaTeX, one can write:

\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}

which produces:

I would like to be able to do the same thing in HTML and CSS.

So, far, I've tried this (see it on 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>

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;
}

I'm hoping to use this kind of styling to display the metadata for blog posts on a blog page. What I have tried so far, however, has a few problems.

1. First, it runs into problems when the title of the blog post (or any line, really) becomes excessively long. The { is currently set to a fixed size and does not dynamically scale with the metadata for the blog post. This can be seen in the JSFiddle example, where the "Tags" line is now below the bottom of the curly bracket. If dynamic scaling is impossible, I would be willing to settle for white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis;-ing the metadata of the blog post and just having three lines of text, regardless of the length of the metadata.

2. My code also seems to be font-dependent. If you uncomment the font change at the top of the CSS section in the JSFiddle example, you will see that the middle of the curly bracket is no longer aligned with the date of the post after changing the font.

3. The way that the bracket is scaled can make for a pretty ugly bracket, at least in the font of the example as it currently stands. (Perhaps this question and this answer could help?)

Thus, my question is whether there is a way to fix what I have tried so far in order to address these problems or whether there is a better way to go about doing this with HTML and CSS. Preferably, the solution would only use HTML and CSS.

解决方案

You can easily do this with CSS border-image. You'd just need a :before pseudoelement to put the middle bit of the curly in there to make it scale really nice.

The problem is potentially browser support. While MDN reports the core features to be working as of IE9, others say it's IE11 and up. From what I see on MDN the older IE's should (with -ms prefix) support all the features you need for this case though.

edit: Working example in IE11, FF and Chrome. Regrettably it's a mess in IE10 and below.

这篇关于使用HTML和CSS的可扩展大括号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！