CSS Text rechtfertigen mit Buchstabeabstand
https://stackoverflow.com/questions/4355009
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Gibt es eine Möglichkeit, um automatisch Worte zu rechtfertigen Zeichenabstand verwendet wird, die jeweils in ihrer Reihe, auf eine definierte Breite, mit CSS?
Zum Beispiel: „So etwas wie dieses“ aussehen würde, na ja, so etwas wie folgt aus:
Gibt es eine unaufdringliche Art und Weise solches Styling zu meinem Text zu bewerben? Ich glaube, reine CSS diese Option nicht (zumindest nicht mit CSS-Versionen vor 3, CSS3 eine text-justify Eigenschaft zu haben scheint, aber es ist noch nicht gut unterstützt), so js Lösungen Fein auch sein würden.
Lösung
Hier ist ein Skript, das es tun kann. Es ist nicht schön, aber vielleicht können Sie es zerhacken Ihre Bedürfnisse zu erfüllen. (Aktualisiert Griff Resizing)
function SplitText(node) {
var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");
for (var i = 0; i < text.length; i++) {
var letter = document.createElement("span");
letter.style.display = "inline-block";
letter.style.position = "absolute";
letter.appendChild(document.createTextNode(text.charAt(i)));
node.parentNode.insertBefore(letter, node);
var positionRatio = i / (text.length - 1);
var textWidth = letter.clientWidth;
var indent = 100 * positionRatio;
var offset = -textWidth * positionRatio;
letter.style.left = indent + "%";
letter.style.marginLeft = offset + "px";
//console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
}
node.parentNode.removeChild(node);
}
function Justify() {
var TEXT_NODE = 3;
var elem = document.getElementById("character_justify");
elem = elem.firstChild;
while (elem) {
var nextElem = elem.nextSibling;
if (elem.nodeType == TEXT_NODE)
SplitText(elem);
elem = nextElem;
}
}#character_justify {
position: relative;
width: 40%;
border: 1px solid red;
font-size: 32pt;
margin: 0;
padding: 0;
}
#character_justify * {
margin: 0;
padding: 0;
border: none;
}<body onload="Justify()">
<p id="character_justify">
Something<br/> Like
<br/> This
</p>
</body>
Andere Tipps
Die CSS einzige Lösung ist text-justify: distribute https: //www.w3 .org / TR / CSS-Text-3 / # text rechtfertigen aber die Unterstützung ist immer noch sehr schlecht.
Ein kleines Experiment mit text-align-last: justify und das Hinzufügen von Leerzeichen zwischen den Buchstaben.
div{
display:inline-block;
text-align: justify;
text-align-last: justify;
letter-spacing: -0.1em;
}<div>
S o m e t h i n g<br>
l i k e<br>
t h i s
</div>
Ich weiß, das ist ein altes Thema, aber ich konfrontiert diese die andere Nacht. Und eine passende Lösung mit Hilfe von Tabellen gefunden.
Jeder Buchstabe wird in einen <td> </td> gestellt werden Ich weiß, es langweilig aussieht, aber wenn Sie dies tun wollen, wäre es für ein Wort oder zwei, richtig? Oder Sie können immer JS verwenden, es zu füllen, wenn zu viel ist. Dies ist jedoch nur CSS und sehr vielseitige Lösung.
Unter Verwendung von Buchstaben-Abstand der Buchstaben erhalten richtig verteilt. Sie sollen mit ihm spielen, um in Abhängigkeit von der Breite der Tabelle.
#justify {
width: 300px;
letter-spacing: 0.5em;
}
<table id="justify">
<tbody>
<tr>
<td>J</td>
<td>U</td>
<td>S</td>
<td>T</td>
<td>I</td>
<td>F</td>
<td>Y</td>
</tr>
</tbody>
</table>
Cross sicher, so gut wie nichts unterscheiden. Ist nur CSS.
Ich benutzte es in Meine Website , die in Englisch und Spanisch ist. der Untertitel unter meinem Namen in Spanisch hat einen zusätzlichen Buchstaben, und es wird die Breite herauszutreten. Mit Hilfe der Tabellen oben erläutert, wird es auf die gleiche Breite automatisch verteilt. Abstand manuell hatte ich habe eine ganze Bedingung für jede Sprache zu definieren, zu gehen um die.
Hier ist ein anderer aproach mit einem jQuery Snippet ich für diese Frage schrieb: Stretch Text fit Breite von div :
HTML:
<div class="stretch">Something</div>
<div class="stretch">Like</div>
<div class="stretch">This</div>
jQuery:
$.fn.strech_text = function () {
var elmt = $(this),
cont_width = elmt.width(),
txt = elmt.html(),
one_line = $('<span class="stretch_it">' + txt + '</span>'),
nb_char = elmt.text().length,
spacing = cont_width / nb_char,
txt_width;
elmt.html(one_line);
txt_width = one_line.width();
if (txt_width < cont_width) {
var char_width = txt_width / nb_char,
ltr_spacing = spacing - char_width + (spacing - char_width) / nb_char;
one_line.css({
'letter-spacing': ltr_spacing
});
} else {
one_line.contents().unwrap();
elmt.addClass('justify');
}
};
$(document).ready(function () {
$('.stretch').each(function () {
$(this).strech_text();
});
});
das auch nötig, damit ich die vorgeschlagene Technik in einem einfachen Gebrauch gebündelt haben Jquery-Plugin finden Sie hier: https://github.com/marc-portier/jquery-letterjustify#readme .
Es verwendet das gleiche Verfahren in seinem Kern und fügt einige Optionen zu zwicken. Kommentare begrüßen zu können.
Noch einmal, ich weiß, das ist wirklich alt, aber warum nicht nur einen Raum setze zwischen jedem Buchstaben und dann text-align: justify? Dann würde jeder Buchstabe als ‚Wort‘ angesehen werden und gerechtfertigt entsprechend
Eine andere Möglichkeit, dies zu umgehen könnte den „vw“ Sizing-Einheit zu verwenden sein. Diese Art Einheit kann in Schriftgröße Eigenschaften und stellt ein Prozent der Fensterbreite verwendet werden.
Hinweis: Es ist nicht genau das, was Sie suchen, aber erfordert kein Scripting. Es macht die Textgröße anpassen, sondern auch auf die Breite Ihrer Seite anpassen.
Beispiel:
.heading {
font-size: 4vw;
}
wird die Breite eines Zeichens in dem aktuellen Schriftart 4% der Fensterbreite machen.
Sie könnten dann Medienabfragen verwenden, wenn Sie die Schriftgröße auf eine minimale Größe auf die Breite des Fensters basiert sperren.
@media only screen and (max-width: 768px) {
font-size: 2rem;
}
Mit dem Browser-Inspektoren mit der Eigenschaft font-size zu spielen und den Wert zwicken, was sinnvoll für Ihre Anwendung macht.
Die "vw" Einheit arbeitet in IE9 +, iOS 8.3+ und ab Android 4.4 und alle anderen gängigen Browsern. Ich würde mich keine Sorgen über die mobile Unterstützung zu viel, wie Sie Medienabfragen verwenden können, die richtige Dimensionierung für diese Geräte zu setzen, wie oben beschrieben.
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
Ansichtsfenstereinheiten sind eine leistungsstarke Möglichkeit, viele verschiedene Aspekte Ihrer Website mit wenig Code zu skalieren.
Ich habe gerade einen JQuery-Skript aus der Tabelle Tony B Ansatz. Hier ist die JSFiddle https://jsfiddle.net/7tvuzkg3/7/
Dieses Skript erstellt eine Tabelle mit jedem Zeichen in einer Reihe. Dies funktioniert mit vollem Satz. Ich bin nicht sicher, dies ist vollständig optimiert.
justifyLetterSpacing("sentence");
function justifyLetterSpacing(divId) {
// target element
domWrapper = $('#' + divId).clone().html('');
// construct <td>
$('#' + divId).contents().each(function(index){
// store div id to td child elements class
var tdClass = divId ;
// split text
$textArray = $(this).text().split('');
// insert each letters in a <td>
for (var i = 0; i < $textArray.length; i++) {
// if it's a 'space', replace him by an 'html space'
if( $textArray[i] == " " ) {
$('<td>')
.addClass(tdClass)
.html(" ")
.appendTo(domWrapper);
}// if it's a char, add it
else{
$('<td>')
.addClass(tdClass)
.text($textArray[i])
.appendTo(domWrapper);
}
}
});
// create table
table =
$( "<table id='"+divId+"'/>" ).append(
$( "<tbody>" ).append(
$( "<tr>" ).append(
( domWrapper ).children('td')
)
)
);
// replace original div
$('#' + divId).replaceWith( table );
} #sentence {
width : 100%;
background-color : #000;
color : #fff;
padding : 1rem;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sentence">LOREM IPSUM DOLOR</div>
Was ist los mit text-align: justify? Ich glaube, ich könnte Ihre Frage sein Unverständnis.
