Продвинутые обертки в CSS - PullRequest
Новая
       60

Продвинутые обертки в CSS

0 голосов
/ 30 декабря 2018

У меня есть следующий код: 

<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>

Проблема в том, что тире.Когда второй тайм-тег разбивается на новую строку, черточка должна разбиться на дополнительную строку.Когда перерыв не требуется, тогда текст должен быть таким, какой он есть.

Итак, выходное поведение, которое я пытаюсь заставить: 

<time>2018-23-12&nbsp;23:59</time>
—
<time>2018-24-12&nbsp;23:59</time>

Есть идеи, как это решить?Спасибо всем за помощь: -)

Ответы [ 3 ]

0 голосов
/ 30 декабря 2018 

time,
span {
  display: inline-block;
}
<time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>

Как-то так?

0 голосов
/ 30 декабря 2018 

$("section").resizable();
section{
  outline: 1px solid pink;
  max-width: 80%;
  min-height: 80px;
}

time{
  display:inline-block;
  white-space: nowrap;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section>
  <time>2018-23-12&nbsp;23:59</time>
  &ndash;
  <time>2018-24-12&nbsp;23:59</time>
</section>

Если вы хотите, чтобы - разбился на собственную строку, вам может потребоваться некоторый JavaScript, чтобы обнаружить разрыв строки и изменитьHTML соответственно

0 голосов
/ 30 декабря 2018

Использование display:block; до time

time{
display:block;
}
<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>
...