Как подать заявку, строка переносят/продолжение стиль и форматирование кода с CSS

Выражение

{ type, which, selected: { ...selected, ...hovered } }

почти 1 sup> эквивалентно

{
    "type": type,
    "which": which,
    "selected": Object.assign({}, selected, hovered)
}

, где type, which, selected и [ 115] являются локальными переменными. Другими словами, "type" и "which" задаются с помощью сокращения свойства , а "selected" указывается явно как поверхностное слияние selected и hovered.


1 sup> Я говорю «почти», потому что Object.assign запускает установщики свойств, а ... синтаксис расширения объекта - нет.

12
задан lauhub 15 February 2018 в 14:36
поделиться

4 ответа

Вот один (неприятный) способ сделать это. Требуется много плохих методов. Но ТАК о решениях настоящих проблем, таким образом, здесь мы идем...

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

Затем стилю содержания блока нужно было установить высоту строки. и фоновое изображение, которое содержит много глифов новой строки в начале каждой строки кроме первой. Поскольку это - код, который было бы разумно ожидать, что это не перенесет больше чем 5 раз. Так повторение 5 раз, вероятно, enoygh.

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

p.codeLine
{
    font-size: 12px;
    line-height: 12px;
    font-family: Monospace;
    background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
    padding-left: 6px; /* move the text over so we can see the newline glyph*/
}
3
ответ дан 2 December 2019 в 23:08
поделиться

Это не может быть сделано с CSS.Прошу прощения.:(

1
ответ дан 2 December 2019 в 23:08
поделиться

Я нашел решение очень похожим на Jack Ryan, но с символом 'продолжения' в конце строки. Это также располагает длительные строки с отступом.

CSS:


p {
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  line-height: 16px;
  margin: 0 0 16px 0;
}

.wrap-cont {
  font-family: Courier New, Monospace;
  margin-bottom: 16px;
  width: 400px;
}

.wrap-cont p {
  background: url(wrap-cont.gif) no-repeat bottom right;
  text-indent: -32px;
  margin: 0 0 0 32px;
  padding-right: 16px;
}

HTML:


<p>For example, you may have a really long command line to display, like this:</p>
<div class="wrap-cont">
  <p>c:\Program Files\My Application\Module\bin\..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
  <p>c:\Program Files\My Application\Module\bin\..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
</div>
<p>Stackoverflow forces a line like this not to wrap.</p>
2
ответ дан 2 December 2019 в 23:08
поделиться

Если Вы хотите, чтобы это было однозначно, необходимо будет добавить разметку. Я предложил бы использовать <ol> с одним элементом списка на строку кода, потому что тот путь Вы получаете нумерацию строк бесплатно. Если это - слишком много работы, чтобы сделать через сайт, Вы могли бы всегда добавлять его с помощью JavaScript.

1
ответ дан 2 December 2019 в 23:08
поделиться