Wie kann die letzte Textzeile in CSS zentriert werden?

Wie kann ich Text zentrieren?

Derzeit zentriert "Ausrichten" nicht die letzte Zeile.

Sie können die text-align-lastEigenschaft verwenden

.center-justified {
    text-align: justify;
    text-align-last: center;
}

Hier ist eine Kompatibilitätstabelle: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility .

Funktioniert in allen Browsern außer Safari (sowohl Mac als auch iOS) , einschließlich Internet Explorer.

Funktioniert auch in Internet Explorer nur mit text-align: justify(keine anderen Werte von text-align) startund endwird nicht unterstützt.

Für Leute, die Text suchen, der sowohl zentriert als auch gerechtfertigt ist, sollte Folgendes funktionieren:

<div class="center-justified">...lots and lots of text...</div>

Mit der folgenden CSS-Regel (passen Sie die widthEigenschaft nach Bedarf an):

.center-justified {
  text-align: justify;
  margin: 0 auto;
  width: 30em;
}

Hier ist die Live-Demo .

Was ist los?

1. text-align: justify;stellt sicher, dass der Text die gesamte Breite des Textes ausfüllt div.
2. margin: 0 auto; ist eigentlich eine Abkürzung für vier Regeln:
   • Der erste Wert wird für die Regeln margin-topund verwendet margin-bottom. Das Ganze bedeutet margin-top: 0; margin-bottom: 0also, dh keine Ränder über oder unter dem div.
   • Der zweite Wert wird für die Regeln margin-leftund verwendet margin-right. Diese Regel führt also zu margin-left: auto; margin-right: auto. Dies ist das clevere Stück: Es weist den Browser an, den an den Seiten verfügbaren Platz zu nutzen und ihn gleichmäßig nach links und rechts zu verteilen. Das Ergebnis ist zentrierter Text.
     Dies würde jedoch nicht ohne funktionieren
3. width: 30em;, was die Breite des begrenzt div. Nur wenn die Breite begrenzt ist, bleibt ein Leerzeichen margin: autozum Verteilen übrig . Ohne diese Regel divwürde der gesamte verfügbare horizontale Raum beanspruchen und Sie würden den Zentrierungseffekt verlieren.

Es funktioniert mit diesem Code

text-align: justify; text-align-last: center;

Es scheint keinen Weg zu geben. Sie können es fälschen, indem Sie ausrichten und dann die letzte Textzeile in einen Bereich einschließen und genau das so einstellen, dass die Mitte des Textausrichters angezeigt wird. Es funktioniert gut für kleine Textblöcke, ist jedoch kein nützlicher Ansatz für große Textmengen oder dynamischen Text.

Ich schlage vor, jemanden bei Adobe zu finden, der an der W3C-Arbeit beteiligt ist, und ihn zu nerven, um bei seinem nächsten Meeting die Rechtfertigung für rechts / links / Mitte zu erörtern. Wenn jemand in der Lage sein wird, auf grundlegende Typografiefunktionen in CSS zu drängen, ist dies Adobe.

<div class="centered">
<p style="text-align: justify;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque</p>nisl consectetur et.</div>

Ich konnte das Ergebnis erzielen, indem ich den Inhalt in ein div-Tag einwickelte und das Attribut text-align: center anwendete. Unmittelbar nach dem div-Tag habe ich den Inhalt in ein Absatz-Tag und ein angewendetes Attribut eingeschlossen, textausrichten: rechtfertigen. Um die letzte Zeile zentriert zu machen, habe ich sie aus dem Absatz-Tag ausgeschlossen, das dann auf das im div-Tag angewendete Attribut zurückgreift. Sie müssen nur strategisch festlegen, wie viele Wörter Sie in der letzten Zeile haben möchten. Ich habe eine Demo von Fiddle beigefügt. Hoffe das hilft.

Demo - Center Absatztext ausrichten

Die meisten Lösungen hier berücksichtigen keine reaktionsschnellen Textfelder.

Die Textmenge in der letzten Zeile des Absatzes wird von der Größe des Betrachter-Browsers bestimmt und wird daher sehr schwierig.

Ich denke kurz gesagt, wenn Sie irgendeine Art von Browser- / Handy-Reaktionsfähigkeit wünschen, ist dies nicht möglich :(

Berechnen Sie die Länge Ihrer Textzeile und erstellen Sie einen Block, der der Größe der Textzeile entspricht. Zentrieren Sie den Block. Wenn Sie zwei Zeilen haben, benötigen Sie zwei Blöcke, wenn diese unterschiedlich lang sind. Sie können ein span-Tag und ein br-Tag verwenden, wenn Sie keine zusätzlichen Leerzeichen aus den Blöcken möchten. Sie können auch das Pre-Tag verwenden, um innerhalb eines Blocks zu formatieren.

Und Sie können dies tun: style = 'text-align: center;'

Zur Vertikalen siehe: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Hier ist der beste Weg für Blöcke und Webseitenlayouts. Gehen Sie hier und lernen Sie den neuen Standard kennen, der 2009 eingeführt wurde. Http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/# Rechtfertigung-Inhalt-Eigenschaft

Auch w3schools hat viele flexible Beispiele.

Lösung (nicht die beste, funktioniert aber in einigen Fällen immer noch) für nicht-dinamischen Text mit fester Breite. Nützlich für Situationen, in denen wenig Platz vorhanden ist, um Text bis zum Ende der vorletzten Zeile zu "strecken". Machen Sie am Ende des Absatzes einige Symbole (experimentieren Sie mit ihrer Länge) und verstecken Sie sie; auf die absolute Position des Absatzes anwenden oder einfach den freien Platz mit Polsterung / Randbildung korrigieren.

Gute Kompatibilitäts- / Crossbrowser-Methode zum Ausrichten von Text in der Mitte.

Beispiel (vorheriger Absatz):

.paragraph {
    width:455px;
    text-align:justify;
}

.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}

<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,<br><center>vel scelerisque nisl consectetur et.</center></div>

Und nach dem Fix:

.paragraph {
    width:455px;
    text-align:justify;
    position:relative;
}
.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}
.paragraph b{
  opacity:0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}

<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <b>__</b><br><div class="center">vel scelerisque nisl consectetur et.</div></div>

Einfach. Textausrichtung: begründen; (um die Elemente auszurichten) Padding-left :? px; (um die Elemente zu zentrieren)

Sie können das Element auch über HTML + JS in zwei Teile teilen.

HTML:

<div class='justificator'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a 
type specimen book.
</div>

JS:

function justify() {
    // Query for elements search
    let arr = document.querySelectorAll('.justificator');
    for (let current of arr) {
        let oldHeight = current.offsetHeight;
        // Stores cut part
        let buffer = '';

        if (current.innerText.lastIndexOf(' ') >= 0) {
            while (current.offsetHeight == oldHeight) {
                let lastIndex = current.innerText.lastIndexOf(' ');
                buffer = current.innerText.substring(lastIndex) + buffer;
                current.innerText = current.innerText.substring(0, lastIndex);
            }
            let sibling = current.cloneNode(true);
            sibling.innerText = buffer;
            sibling.classList.remove('justificator');
            // Center
            sibling.style['text-align'] = 'center';


            current.style['text-align'] = 'justify';
            // For devices that do support text-align-last
            current.style['text-align-last'] = 'justify';
            // Insert new element after current
            current.parentNode.insertBefore(sibling, current.nextSibling);
        }
    }
}
document.addEventListener("DOMContentLoaded", justify);

Hier ist ein Beispiel mit div- und p-Tags

function justify() {
    // Query for elements search
    let arr = document.querySelectorAll('.justificator');
    for (let current of arr) {
        let oldHeight = current.offsetHeight;
        // Stores cut part
        let buffer = '';

        if (current.innerText.lastIndexOf(' ') >= 0) {
            while (current.offsetHeight == oldHeight) {
                let lastIndex = current.innerText.lastIndexOf(' ');
                buffer = current.innerText.substring(lastIndex) + buffer;
                current.innerText = current.innerText.substring(0, lastIndex);
            }
            let sibling = current.cloneNode(true);
            sibling.innerText = buffer;
            sibling.classList.remove('justificator');
            // Center
            sibling.style['text-align'] = 'center';
            // For devices that do support text-align-last
            current.style['text-align-last'] = 'justify';
            current.style['text-align'] = 'justify';
            // Insert new element after current
            current.parentNode.insertBefore(sibling, current.nextSibling);
        }
    }
}
justify();

p.justificator {
    margin-bottom: 0px;
}
p.justificator + p {
    margin-top: 0px;
}

<div class='justificator'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<p class='justificator'>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p><p>Some other text</p>