2012-01-24 11 views
32

Jaki jest najlepszym sposobem na zachowanie spacje w HTML? Mamy wiele stron, które obniżają dane z naszej bazy danych, a dane mogą zawierać wiele spacji. Świadczone elementy HTML, które przechowują dane różnią się od znaczników kotwicznych (<a>), spans (<span>), table rows (<tr>, <td>, etc.HTML/CSS - Najlepsza praktyka w celu zachowania białej przestrzeni na niektórych elementach?

Najłatwiejszą rzeczą do zrobienia teraz byłoby dodać globalną klasę css tak:

body a, span, tr, td { white-space: pre; } 

Zastanawiam się, czy istnieje lepszy sposób implementacji tego bez przypisywania klasy do każdego pojedynczego elementu HTML.

+3

Twój przykład nie używa klasy css i nie wymaga przypisania klasy do każdego elementu. –

+0

@ RichardMarskell-Drackir Yea, rzadko do czynienia z CSS, nie wiem CSS bardzo dobrze lol – contactmatt

Odpowiedz

50

chciałbym użyć tej samej techniki, ale wewnątrz klasy dane owijki gdzie jest to potrzebne:

.data a, .data span, .data tr, .data td { white-space: pre; } 

HTML:

<div class="data"> 
.... 

</div> 
+0

To jest dobry pomysł. O wiele łatwiej jest zawijać dane wyjściowe, niż zmieniać wszystkie znaczniki w tym wyjściu. –

+0

Działa jak urok! –

6

Co jest nie tak z wymianą obowiązuje przez & nbsp ;? Powinno to działać wewnątrz dowolnego elementu i zachować spacje w renderowanym pliku wyjściowym.

+10

niewłaściwy z tego, że istnieje 26 różnych spacji ('\ x09 \ x0A \ x0B \ x0C \ x0D \ x20 \ xA0 \ u1680 \ u180E \ U2000 \ u2001 \ u2002 \ u2003 \ u2004 \ u2005 \ u2006 \ u2007 \ u2008 \ u2009 \ u200A \ u202F \ u205F \ U3000 \ u2028 \ u2029 \ uFEFF') (http://perfectionkills.com/whitespace-deviations/ wymienia 25, ale jest też '\ uFEFF') i szerokość„biało spacja "nie jest taka sama we wszystkich możliwych białych przestrzeniach.Projektanci czcionek decydują o szerokości postaci, a także o znakach białych. Jeśli zamienisz przestrzeń ('\ x20') na  , powinno być w porządku, ale jest 25 innych możliwych białych przestrzeni do pielęgnacji. –

+0

W zależności od języka po stronie serwera, możesz mieć coś w stylu char.iswhitespace http://msdn.microsoft.com/en-us/library/system.char.iswhitespace.aspx, które ułatwia zastąpienie wszystkich znaków białych znaków. –

+2

Jednak użycie białej spacji: opcja wstępna była w mojej opinii prostsza/łatwiejsza, ponieważ można zmienić arkusz stylów bez zmiany kodu. –

5

Zależy to od tego, czy zachowamy białe spacje w niektórych elementach i co dokładnie powinno się tam zdarzyć. Zakładając, że nie ma żadnych reguł CSS, które mogłyby zakłócić Twój CSS można uprościć do

a, span, tr { white-space: pre; } 

ponieważ element a jest sprecyzowane w ciągu body i td domyślnie dziedziczy właściwości z tr.

Jeśli chcesz zapobiec zwijaniu wielu spacji, zamiast wymuszać stały podział na linie, wówczas bardziej odpowiednie może być użycie white-space: pre-wrap lub zastąpienie spacji spacjami bez przerw.

Wreszcie, potrzeba i możliwości ograniczania reguły do ​​wybranych elementów silnie zależała od sposobu wyboru powinno być zrobione. Być może można selektywnie ustawić white-space do pre (lub pre-wrap) do niektórych elementów, które otaczają odpowiednie części, pamiętając, że nieruchomość dziedziczy jeśli nie została ustawiona na elementach wewnętrznych.

Można również przerwać dziedziczenie: można ustawić white-space: pre na table elementu, na przykład, jeśli chcesz, aby reguła dotyczy większości treści i ustaw white-space: normal na tych wierszy i komórek, w których nie jest do zastosowania.

15
<pre>no need for  style</pre> 
+1

Należy pamiętać, że znacznik 'pre' jest zwykle wyświetlany jako element' block'. –

Powiązane problemy