Vraag Is het mogelijk om ingesneden regels in code-blokken in te knippen via CSS?


Ik heb een code in een HTML-document. De code zelf is niet belangrijk - ik heb Lorem ipsum gebruikt om dit duidelijk te maken.

<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.
Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</code></pre>

Ik heb gesolliciteerd white-space: pre-wrap naar het codeblok om lange lijnen te dwingen om te wikkelen indien nodig. Ik zou graag willen weten of het mogelijk is om het ingepakte gedeelte van de ingepakte lijnen te laten inspringen om zoiets als dit te geven:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.
Quisque varius, erat vel euismod ornare, libero orci laoreet velit,
        at lobortis sem nisl et eros.

18
2017-08-13 14:10


oorsprong


antwoorden:


Het is best mogelijk ... ik gebruik niet het gebruik van de <pre> en <code> tags en ik weet niet zeker hoe belangrijk deze tags voor je zijn ... maar ik heb de stijl gekregen waarnaar je op zoek was en imiteer de opmaak zo goed als ik kon. Bekijken.

http://jsfiddle.net/PVZW5/7/

CSS

div {
    margin-left:24px;
    width:400px;
}

p {
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    margin:0 28px;
    text-indent: -28px;
}

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.</p>
    <p>Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</p>
</div>

Kijk eens naar deze ZO vraag en sommige oplossingen die er vandaan zijn gekomen. Het is relevant voor uw vraag. Het is de moeite waard om even te kijken :)

Ik hoop dat dit helpt!


10
2017-08-13 14:36



Helaas na veel zoeken ben ik gaan geloven dat dit momenteel onmogelijk is met alleen CSS. Wat nodig is, is een pseudo-element voor elke "regel" (tekstaanpassing /^.*$/m), die het inspringen van lijnen mogelijk zou maken voorbij de eerste te controleren via CSS.

Ik heb dit probleem op de mailinglijst op www-stijl naar voren gebracht. fantasai's antwoorden zijn veelbelovend, met name de suggestie dat het text-indent eigendom kan worden uitgebreid om toe te staan text-indent: 2em hanging each-line.


8
2017-09-20 10:26



text-indent: -2em;
padding-left: 2em;

1
2017-08-13 14:23



Momenteel niet mogelijk alleen met CSS, maar met behulp van een scripttaal ...

PHP

echo '<pre id="the_pre_id"><div>'.str_replace("\n",'</div><div>',$text).'</div>';

of JavaScript

var el = document.getElementById('the_pre_id');
el.innerHTML='<div>'+el.innerHTML.replace(/\n/g, '</div><div>')+'</div>';

Let op, u hoeft alleen maar een van de bovenstaande fragmenten te kiezen. Beide bereiken hetzelfde.

We vervuilen de markup (niet-semantische tags), maar het stelt ons in staat om stijlregels per regel te maken:

CSS

pre{
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
pre > div {
    padding-left: 1em;
    text-indent: -1em;
}

En we hebben precies het effect waarnaar u op zoek bent ...

Resultaat

Lorem ipsum dolor sit amet, consectetur
  adipiscerende elit.
  De malis autem et bonis ab iis animalibus,
  quae nondum depravata sint, ait optime
  iudicari.
  Quae cum praeponunt, ut sit aliqua rerum
  selectio, naturam videntur sequi; Quasi
  ego id curem, quid ille aiat aut neget.


1
2018-03-29 00:59



Ik weet niet zeker of dit werkt <pre>, maar het ziet er veelbelovend uit.

http://www.ehow.com/how_2382848_hanging-indent-css.html


0
2017-08-13 14:22



Dit artikel heeft een oplossing met de first-of-type pseudo-selector die tot nu toe voor mij lijkt te werken: http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent

html{
  margin-left: 100px;
}
p {
	margin: 6em inital;
  width: 300px;
}
p:first-of-type {
	text-indent: -4em;
}
<p>Leverage agile frameworks to provide a robust synopsis for high level 
overviews. Iterative approaches to corporate strategy foster collaborative
  thinking to further the overall value proposition.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. 
At the end of the day, going forward, a new normal that has evolved from 
generation X is on the runway heading towards a streamlined cloud solution. 
  User generated content in real-time will have multiple touchpoints for offshoring.</p>


0
2018-05-09 14:21