nascondi i separatori di inizio e fine riga

due soluzioni di seguito: una con puro css, la seconda con jQuery, che consente a qualsiasi tipo di simbolo / immagine di essere un separatore

pre: abbastanza difficile da formulare e trovare tali domande / soluzioni quindi mi dispiace se la duplicazione.

Ho un blocco multi-linea giustificato con elementi di collegamento ipertestuale (non interamente) di testo (tag / categorie / ecc.) Senza larghezza fissa separata da “|” simbolo e spazi intorno. Sembra quasi una nuvola di tag, ma con un peso, una dimensione e un’altra formattazione fissi, può contenere più di una parola in un elemento di collegamento ipertestuale. Il problema sorge quando un separatore viene posizionato poco prima della fine della linea o all’inizio della linea, in realtà, succede sempre in un modo o nell’altro mentre imposto il filetto per colbind gli elementi, quindi questo sembra davvero brutto. Alla ricerca di una soluzione per rimuovere i separatori all’inizio e alla fine delle linee.

Per una migliore comprensione cercherò di fare un esempio qui.

C++ | PHP | CSS | ASP | JavaScript | jQuery | HTML 5 | StackOverflow 

Qualcosa del genere, ovviamente, con giustificazione e molte altre righe di fila. E un altro disegno di ciò che voglio raggiungere.

 C++ | PHP | CSS | ASP JavaScript | jQuery HTML 5 | StackOverflow 

Quindi il numero fisso di elementi in una linea non è un’opzione, anche la larghezza fissa non è un’opzione.

L’unica soluzione che ho trovato è quella di impostare il font su monospace, contare i simboli e stampare pragmaticamente riga per riga con lo scripting lato server, il lato negativo, ovviamente, è rappresentato dai font monospace. Alla ricerca di una soluzione migliore come pure html / css (sarebbe perfetto), JavaScript / jQuery formattazione dopo l’output.

Grazie in anticipo!

EDIT: rispondendo a un commento qui sotto, il markup può essere qualsiasi cosa desideri, in pratica qualcosa come:

  

Ecco un’idea: http://jsfiddle.net/WyeSz/
(nota che la demo di jsfiddle usa un reset CSS, potresti aver bisogno di un po ‘più di CSS per ripristinare gli stili degli elenchi, ecc.)

In sostanza, si imposta border-left sugli elementi dell’elenco, quindi si posiziona l’intero elenco -1px a sinistra all’interno di un contenitore con overflow:hidden , che taglia i bordi a sinistra.

 
  • C++
  • PHP
  • CSS
  • ASP
  • JavaScript
  • jQuery
  • HTML 5
  • StackOverflow
 ul { width:200px; margin-left:-1px;/* hide the left borders */ } li { float:left; padding:2px 10px; border-left:1px solid #000; } div { overflow:hidden;/* hide the left borders */ } 

Sì, puoi farlo ma devi inserire il | in un tag. Guarda questo esempio

HTML:

  

CSS:

 #tags { width: 170px; } #tags a { white-space: nowrap; } 

JavaScript (jQuery):

 var iTop; $("#tags a").each(function() { if (iTop < $(this).offset().top) { $(this).prev("span").remove(); } iTop = $(this).offset().top; }); 

Prova questo:

jQuery:

 $('document').ready(function() { $('div').find('a').not(':last-child').after(' | '); }); 

HTML:

    

In questo modo, il separatore di contenuti può essere qualsiasi contenuto HTML.