Hinzufügen von Leerzeichen zwischen den Wörtern in Bootstrap 3.0 (HTML-escape-Zeichen nicht funktioniert)

Stackoverflow, bitte um Hilfe!!

Ich entwickle eine website mit Bootstrap (3.1.1) und AngularJS für meinen Freund-Fotografie-Geschäft.

Das problem, das ich bin der Begegnung entsteht, wenn Sie versuchen, um ein tab-Abstand zwischen den Wörtern in der Navigationsleiste, zum Beispiel:

<a href="#/" class="navbar-brand">JOHN &#9;&#9; DOE</a>

Der einzige Weg, in dem ich in der Lage gewesen, diese zu arbeiten, ist die Verwendung <pre> - tags, aber das Resultat ist ein komplett anderes styling, was gewünscht ist.

Ich habe versucht mit und ohne Verwendung der AngularJS $Sanitize - Modul, das hatte keine Auswirkungen.

Ich glaube, ich bin fehlt etwas grundlegendes, aber ich bin natürlich nicht sicher, was das ist.

Vielen Dank im Voraus,

JohnDoe

Warum nicht einen span, und definieren Sie eine Klasse für das span?
Erwähnenswert ist, ich bin ein nicht sehr erfahrener front-end-Entwickler.
vielen Dank für die super schnelle Antwort, könnten Sie einen einfachen zB? Ich habe versucht, mit Hilfe des span-tags, um jedes der Worte, die ich will "spaced" auseinander.
zum Beispiel: john 	 doe
Ich habe ein Beispiel erstellt, hier mit Aibrean Vorschlag: http://www.bootply.com/XdMAHtNjNZ

InformationsquelleAutor JohnDoe | 2014-07-08

5

Mit einer Spannweite würde viel saubereren code.

<a href="#/" class="navbar-brand">JOHNDOE</a>

Dann die css:

span.tab-space {padding-left:5em;}

JSFiddle-Beispiel
- Ich werde geben, dass eine bash und akzeptiere diese Antwort, wenn es funktioniert, vielen Dank für deinen input!
- Das funktioniert: sauber und einfach. Dank wieder und wieder! =] Ich werde die Antwort akzeptieren, sobald genügend Zeit vergangen ist.
- Nicht zweifeln, das wird richtig Aussehen, aber bedeutet das nicht, dass Suchmaschinen und Screenreader sehen das als ein Wort?
- Gibt es irgendwelche Workarounds zur Verbesserung der SEO mit diesem vorgeschlagene Implementierung? Für die Zeit wird die Webseite soll als online-Lebenslauf zeigen potenzielle Arbeitgeber, also SEO ist nicht ein wichtiges Anliegen. Das ist aber sehr wahrscheinlich ändern wird.
- in diesem Fall können Sie fügen Sie einfach ein Leerzeichen vor "DOE" oder "JOHN". Bedenkt, dass er will, dass der Raum gibt, "mehr" Platz nicht wehtun 😉
- das problem ist, dass zusätzliche Leerzeichen scheinen entfernt zu bekommen... Und wie ich schon sagte, escape-Zeichen scheinen nicht zu funktionieren. Gibt es einen Grund, warum meine gewählte Kombination von frameworks würde halt escape-Zeichen gerendert wird, richtig?
- zusätzliche Leerzeichen aus HTML-Nummern und tatsächliche Räume für Satz verwenden (kein HTML nbsp, sondern eine tatsächliche Raum) sind zwei verschiedene Dinge. Sie könnten versuchen, eine Kombination von dave und meine Lösungen. Ich bin leider nicht kompetent, AngularJS.
- Danke, ich bin glücklich mit Ihrer Lösung für die Zeit.
- Es ist möglicherweise nicht klar, aus meiner Frage, dass John und Doe werden sollen, trennen Sie die Wörter in diesem Zusammenhang.
- Vielleicht setzen Sie den Raum in ein span und Stil.
- Ich denke, das problem ist, wenn er verwendet Zeichen-Entitäten. Wenn es eine Ausgestanzte im Raum (mit der Leertaste), sollte es funktionieren. Das Problem ist, wenn Sie benötigen eine größere Menge von Raum, in diesem Fall die Spanne ist effektiver. Ich würde gerne wissen, ob die Ausgabe in code-Ansicht tatsächlich ein Leerzeichen enthält (bei Verwendung der Tastatur).
InformationsquelleAutor Aibrean
2

CSS word-spacing:
```
a.navbar-brand{
 word-spacing:5em;
}
```
Oder wenn Sie nur wollen, tab, Leerzeichen in bestimmten Punkten haben, benutzen Sie:
```
 
```
Und eine ähnliche CSS:
```
span.tab-space {
 word-spacing:5em;
}
```
- Dies scheint wie eine saubere Methode, die Wirkung, die ich brauche. Ich werde dies versuchen, wenn ich dazu komme aufzuräumen, meine Arbeit.. Danke!
InformationsquelleAutor rybo111
1

Könnten Sie auch tun:
```
.navbar-brand {
{
   white-space:pre;
}
```
Des Browsers nicht zusammenbrechen Leerzeichen.
- Es funktioniert auf Chrome 1.0, Firefox 1.0, IE 6.0, Opera 4.0 und Safari 1.0. Welche browser halten Sie für wichtiger, dass diese würde nicht arbeiten? developer.mozilla.org/en-US/docs/Web/CSS/white-space
- Ich dachte an eine andere syntax. Kommentar entfernt 🙂
- Ich würde dies als eine geeignete Reihe von gezielten Browsern. Ich bin nicht besonders interessiert daran, die mühsame Aufgabe der Unterstützung aller Browser, und vor allem nicht die frühen Versionen des IE.
- Auch, vielen Dank für Ihre Eingabe.
- Ein wenig off-topic, aber Verwandte Frage, wenn ich diese Lösung für meine benutzerdefinierten CSS-Datei und laden Sie diese nach der 3rd-party-style-sheet, welches ich benutze, wird diese überschreiben alle anderen Stil-Merkmale .navbar-brand"? (Ich will, dass 3rd-party-style-sheets, intakt, aber ich möchte noch hinzufügen, dass diese extra-style-Funktion auf meiner Website).
- wenn Sie fügen Sie das benutzerdefinierte CSS, es überschreibt NUR das white-space CSS-Eigenschaft .navbar-brand, alle anderen Stile, die angewendet wird intakt bleiben
- danke, ich dachte, dass der Fall sein kann.
InformationsquelleAutor dave
1

Wenn Stile websites, von seiner besten Praxis, um eine separate HTML-markup und CSS-stylings von der Seite, so dass der Inhalt und stylings handeln unabhängig und sind leichter austauschbar. Dieses wird gesagt, es ist nicht sauber in HTML-Entitäten wie   zu beeinflussen-Stil, weil es diese Regel bricht.

Wenn Sie möchten, ein paar Leerzeichen, wickeln Sie ein  - Tags, um den text und geben Sie es einige Polsterung.

HTML:
```
<a href="#/" class="navbar-brand">JOHN DOE</a>
```
CSS:
```
.space-left{
 padding-left:10px;
}
```
- Eine gute Erklärung der Lösung von Aibrean die Antwort. Vielen Dank für deinen input.
InformationsquelleAutor matt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.