2012-01-24 10 views
32

HTML'de beyaz alanı korumak için en iyi yolu nedir? Veritabanımızdan veri toplayan çok sayıda sayfamız var ve verilerde birden çok boşluk olabilir. Bir var olup olmadığını merak ediyorumHTML/CSS - Belirli öğelerdeki beyaz alanı korumak için en iyi yöntem nedir?

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

: verileri tutmak Teslim edilen HTML elemanları (<a>), spans (<span>), table rows (<tr>, <td>, etc.

kolay şey şöyle küresel css sınıfını eklemek olacaktır şu anda yapılacak bağlantı etiketlerine değişir Her bir HTML öğesine bir sınıf atayarak bu 'u olmadan uygulamak için daha iyi bir yol.

+3

Örneğiniz bir css sınıfı kullanmıyor ve her bir öğeye bir sınıf atamanızı gerektirmiyor. –

+0

@ RichardMarskell-Drackir Yea, CSS ile nadiren ilgileniyorum, CSS'yi çok iyi bilmiyorum lol – contactmatt

cevap

50

ben aynı tekniği kullanın, ancak gerektiğinde veri sınıfı mahfaza içine olacaktır:

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

HTML: & nbsp boşluk yerine sorununun ne

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

</div> 
+0

Bu iyi bir fikir. Çıktının sarılması çok daha kolay, bu çıktıdaki tüm etiketleri değiştirmekten daha iyidir. –

+0

Bir çekicilik gibi çalışır! –

6

;? Bu, herhangi bir elemanın içinde çalışmalı ve işlenen çıktıdaki alanları korumalıdır.

+10

Bunun yanlışı, 26 farklı whitespaces olmasıdır ('\ 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/list 25, ancak "\ uFEFF" de var) ve "beyaz- boşluk "tüm olası beyaz boşluklarda aynı değildir.Karakterin genişliğine, aynı zamanda beyaz boşluk karakterine karar vermek için yazı tipi tasarımcısına kalmış.   ile alanı ('\ x20') değiştirirseniz, bu iyi olmalı, ancak dikkat edilmesi gereken diğer 25 beyaz alan vardır. –

+0

Sunucu tarafı dilinize bağlı olarak, tüm boşluk karakterlerini değiştirmeyi kolaylaştıran char.iswhitespace http://msdn.microsoft.com/en-us/library/system.char.iswhitespace.aspx gibi bir şeye sahip olabilirsiniz. –

+2

Ancak, beyaz boşluk kullanarak: kodunuzu değiştirmeden stil sayfasını değiştirebildiğiniz için ön seçenek daha basit/kolay oldu. –

5

Bu, belirli öğelerin içinde tüm boşlukları korumak isteyip istemediğinize ve tam olarak ne yapılacağına bağlıdır. Bir a eleman varsayılan olarak Alway içinde body ve tdtr den özelliğini miras olduğu için etkileşebilir hiçbir CSS kuralları olduğunu varsayarsak, CSS

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

basitleştirilmiş edilebilir.

Yalnızca birden çok alanın çökmesini önlemek isterseniz, sabit bölümlemeyi satırlara zorlamak yerine, white-space: pre-wrap veya boşluk bırakmadan boşlukları değiştirmek daha yeterli olabilir. Son olarak, kuralı seçilen elemanlarla sınırlamak için ihtiyaç ve olasılıklar, seçimin nasıl yapılması gerektiğine büyük ölçüde bağlıdır. Belki de white-space'u pre (veya pre-wrap) 'e seçerek, ilgili parçaları çevreleyen bazı öğelere, iç elemanlara ayarlanmadığında mülkün miras aldığını hatırlayarak ayarlayabilirsiniz. öyle değil mi nerede kural içeriğinin en için geçerli yapmak istiyorsanız, örneğin bir table elemanı üzerinde white-space: pre ayarlayabilirsiniz ve bu satır veya hücreler üzerinde white-space: normal ayarlayın:

Ayrıca devralma kırabilir uygulanacak.

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

'pre' etiketinin genellikle 'block' öğesi olarak görüntülendiğini unutmayın. –

İlgili konular