CSS - Nielegalne dodatkowe miejsce dodane do ostatniej litery za pomocą właściwości odstępu między literami

Question

Zastanawiam się, czy istnieje ładny, czysty sposób na negowanie właściwości obiektu letter-spacing, gdy trzeba wyśrodkować tekst. Uwaga: aby najlepiej zobaczyć problem, ustaw okno podglądu jsfiddle wystarczająco małe, aby tekst był zawijany do dwóch linii.

HTML

<div class="centered--element"> 
    <div class="center--line"></div> 
    <h1>This is a example here</h1> 
</div> 

CSS

.centered--element{ 
    background: #f2f2f2; 
    text-align: center; 
    text-transform: uppercase; 
} 

/* problem property.. */ 
h1{ letter-spacing: 20px } 

Zrobiłem to, aby wykazać problem: http://jsfiddle.net/tq3Gh/1/

Może to tylko ja, ale to nie patrzy w 100% centralny. Proszę zobaczyć:

Jednak usunięcie odstępu między literami i jest tak, jak można się spodziewać. Więc dla mnie jest problem ..

Oto sam przykład, ale bez litery rozstaw zestaw:

Aktualizacja

Mam lepszy pomysł problemu więc ja” m aktualizowanie pytania, aby uzyskać więcej sensu i lepiej podsumować problem.

Dobrze, po wielu problemach jest odstęp między literami, dodając odstępy po prawej stronie każdej litery, W TYM na ostatnią literę, dlatego pojawia się ten problem. Tak więc, aby to zanegować, spróbuję po prostu użyć margin-right: -(width of my letter spacing). Nie jestem pewien, czy to spowoduje problemy, ale bije na inną opcję, w której mogę zawijać przęsła wokół elementów, które chcę mieć: letter-spacing - ale to dla mnie zbyt brzydkie.

Więc moja zmiana CSS wyglądałby następująco:

h1{ letter-spacing: 20px; margin-right: -20px; } 

Answer 1

Problem rzeczywiście wynika z używania odstępów między literami. According to the standard, gdy zwiększasz odstępy między literami, mechanizm układu uważa, że ​​dodatkowa przestrzeń po liście jest częścią szerokości litery. Tak więc dodatkowa przestrzeń widoczna po prawej stronie jest w pewnym sensie tym, o co prosiłeś.

To, czego oczekujesz, to wstawianie liter w środku i otaczanie każdej litery po obu stronach spacją liter/2. Ale nie jestem pewien, czy jest to funkcja CSS. W rzeczywistości algorytmy rozmieszczania liter są zależne od klienta, więc może to nawet działać na różne sposoby w różnych przeglądarkach.

Zostały więc sposoby na zhackowanie tego problemu, na przykład dodanie prawego marginesu/dopełnienia -1em, ale prawdopodobnie bez "prawdziwego" rozwiązania.

Answer 2

OK, więc faktycznie jej nie problem. Twój środek - element jest w 100% szeroki, więc w rzeczywistości teksty znajdują się za 2 kolumnami w boku.

aby pokazać, że zmęczony zmniejszając krycie elementów bocznych here

i kiedy rzeczywiście dać margines do centrum - element, to rozwiązuje problem here

.centered--element{ 
    background: rgba(0, 0, 0, 0.1); 
    text-align: center; 
    text-transform: uppercase; 
    margin-left:90px; 
    margin-right:90px; 
} 

ostateczne rozwiązanie

To Wygląda na to, że musisz wstawić tekst w tym samym miejscu co odstęp między literami.Pierwsza litera nie ma odstępów zastosowany do lewej strony

.spacing2 { 
    letter-spacing:0.9em; 
    text-align: center; 
    text-indent: 0.9em; 
} 

Final DEMO

Answer 3

Mam edytowano css i dodaje margines na lewo i prawo: CSS:

.centered--element{ 
     background: #f2f2f2; 
     text-align: center; 
     text-transform: uppercase; 
     margin-left:90px; 
     margin-right:90px; 
    } 

Również wspomniałem w DEMO, jak dynamicznie ustawić odstępy między literami:

JS:

document.getElementById("myHeading").style.letterSpacing="15px"; 

Nadzieja to pomaga.

Answer 4

Zrobiłem funkcję javascript, aby poprawić to zachowanie. Pobiera ostatnią literę tekstu dopasowanych elementów i tworzy rozpiętość bez odstępów między literami, a następnie kompensuje szerokość, dodając dodatkowy margines (równy pierwotnemu odstępowi między literami). Być może trzeba będzie ograniczyć jego dane wejściowe do węzłów typu liść, ale działa to naprawdę dobrze, szczególnie jeśli konieczne jest podkreślenie tekstu.

var fixLetterSpacing = function(selector) { 
    $(selector).each(function() { 
     var that = $(this); 
     var text = that.text(); 
     var last = text.substr(-1); 

     that.text(text.substr(0, text.length-1)) 
      .append($('<span>').text(last).css({ letterSpacing: 0 })) 
      .css({ marginRight: that.css('letter-spacing') }); 
    }); 
};