Закрыть ... [X]

Как сделать фигурную скобку в тех

Есть ли простой способ эмулировать среду 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}

который производит:

enter image description here

Я хотел бы иметь возможность делать то же самое в 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; }

Я надеюсь использовать этот стиль для отображения метаданных для сообщений в блогах на странице блога. Тем не менее, у меня было несколько проблем.

  • Во-первых, он сталкивается с проблемами, когда заголовок сообщения в блоге (или любая строка, действительно) становится чрезмерно длинным. { в настоящее время установлен на фиксированный размер и не динамически масштабируется с метаданными для сообщения в блоге. Это можно увидеть в примере JSFiddle, где линия "Теги" теперь находится ниже нижней части фигурной скобки. Если динамическое масштабирование невозможно, я готов согласиться на white-space: nowrap;, overflow: hidden; и text-overflow: ellipsis; - на метаданные сообщения в блоге и просто с тремя строками текста, независимо от длины метаданных.

  • Мой код также зависит от шрифта. Если вы раскомментируете изменение шрифта в верхней части раздела CSS в JSFiddle example, вы увидите, что середина фигурного скобки больше не совпадает с датой публикации после изменения шрифта.

  • Способ масштабирования скобки может сделать довольно уродливую скобку, по крайней мере, в шрифте примера, который в настоящее время стоит. (Возможно, этот вопрос и этот ответ мог бы помочь?)

Таким образом, мой вопрос заключается в том, есть ли способ исправить то, что я пытался до сих пор, чтобы решить эти проблемы, или есть ли лучший способ сделать это с помощью HTML и CSS. Предпочтительно, решение будет только использовать HTML и CSS.

15

html css html5 css3

задан Adam Liter 06 янв. '14 в 5:24

источник поделиться



Поделись с друзьями



Рекомендуем посмотреть ещё:




Latex Cистема уравнений. Фигурная скобка - пример команд fkn Здание нарисовать поэтапно

Как сделать фигурную скобку в тех Как сделать фигурную скобку в тех Как сделать фигурную скобку в тех Как сделать фигурную скобку в тех Как сделать фигурную скобку в тех

ШОКИРУЮЩИЕ НОВОСТИ