it-swarm.com.de

Text auf Breite von div ausdehnen

Ich habe ein div mit fester Breite, aber der Text im div kann sich ändern.

Gibt es eine Möglichkeit, mit css oder anderem den Abstand zwischen den buchstaben einzustellen so füllt der Text das div immer perfekt aus?

39
Curt

Wie Mark sagte, ist text-align:justify; die einfachste Lösung. Bei kurzen Texten hat dies jedoch keine Auswirkungen. Der folgende jQuery-Code streckt den Text auf die Breite des Containers.

Es berechnet den Platz für jedes Zeichen und setzt letter-spacing entsprechend, so dass der Text auf die Breite des Containers steht.

Wenn der Text zu lang ist, um in den Container zu passen, kann er auf die nächsten Zeilen erweitert werden und legt text-align:justify; für den Text fest.

Hier ist eine Demo:

$.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();
    });
});
p { width:300px; padding: 10px 0;background:gold;}
a{text-decoration:none;}

.stretch_it{ white-space: nowrap; }
.justify{ text-align:justify; }

.one{font-size:10px;}
.two{font-size:20px;}
.three{font-size:30px;}
.four{font-size:40px;}
.arial{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p  class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>

Js Geige Demo

31
web-tiki

Dies kann mit text-align:justify und einem kleinen Hack gemacht werden. Siehe hier: http://codepen.io/aakilfernandes/pen/IEAhF/

Der Trick besteht darin, ein Element nach dem Text hinzuzufügen, der vorgibt, wirklich langes Word zu sein. Das falsche Wort ist tatsächlich ein span Element mit display:inline-block und width:100%.

In meinem Beispiel ist das falsche Wort in Rot und hat eine Höhe von 1em, aber der Hack funktioniert auch ohne.

21
Aakil Fernandes

Vielleicht könnte das helfen:

text-align:justify;
7
Mark

Ich habe eine bessere Lösung für Text gefunden, der kürzer als eine Zeile ist, ohne zusätzliche Js oder Tags, nur eine Klasse.

.stretch{ 
  /* We got 2rem to stretch */
  width: 5rem;
  /* We know we only got one line */
  height: 1rem;
  
  text-align: justify; 
}
.stretch:after{
    /* used to stretch Word */
    content: '';
    width: 100%;
    display: inline-block; 
}
<div class="stretch">你好么</div>
<div class="stretch">你好</div>

6
wener

Eine noch einfachere HTML/CSS-Methode wäre die Verwendung von flexbox . Beachtenswert ist jedoch, dass SEO es nicht aufgreift, wenn Sie es als h1 oder so verwenden.

HTML:

<div class="wrapper">
<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>&nbsp</div>
<div>W</div>
<div>o</div>
<div>r</div>
<div>l</div>
<div>d</div>

CSS:

.wrapper{
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border: 1px solid black;
}

jsfiddle hier

4
nathan

Etwas spät für die Party, aber für eine einfache, reine CSS-Implementierung sollten Sie flexbox verwenden:

h1.stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<h1 class="stretch">
  <span>F</span>
  <span>o</span>
  <span>o</span>
  <span>B</span>
  <span>a</span>
  <span>r</span>
</h1>

Ich bin mir nicht sicher, ob der Umbruch jedes Buchstabens in eine span (beachten Sie, dass jedes Element funktionieren wird) eine Verwirrung mit SEO, aber ich kann mir vorstellen, dass Suchmaschinen Tags aus der innerHTML von Tags entfernen, die für wichtige Markups wie Überschriften usw. verwendet werden (Jemand, der SEO kennt bestätigen?)

2
saricden

Einige der obigen Antworten funktionieren gut, aber der Text muss mit vielen child div verpackt werden.
und es gibt viele zusätzliche Codes.
Der Text im div sollte sauber sein, also habe ich es mit Hilfe von JS gemacht.

const words = document.querySelector(".words"),
  wordsArray = words.innerText.split("").map(e => " " == e ? "<div>&nbsp</div>" : "<div>" + e + "</div>");
words.innerHTML = wordsArray.join("");
.words {
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
<div class="words">This is the demo text</div>

2
ronaldtgi

MÄRZ 2018 Wenn Sie in einer aktuelleren Zeit mit dieser Frage landen ... 

Ich habe versucht, das zu tun, was das OP gefragt hat, aber mit einem einzigen Wort und fand Erfolg mit folgendem:

1. Verwenden Sie einen <span> und setzen Sie css: span { letter-spacing: 0px; display:block} (Dadurch wird das Element nur so breit wie der Inhalt.)

2. Beim Laden die Breite der Spanne erfassen let width = $('span').width();

3. Erfassen Sie die Länge der Spanne let length = $('span').length;

4. Setzen Sie die Breite des Bereichs auf den Container zurück. $('span').css({'width','100%'});

5. Erfassen Sie die NEUE Breite des Bereichs (oder verwenden Sie einfach die Containerbreite) let con = $('span').width();

6. Berechne und setze den Buchstabenabstand, um den Container zu füllen $('span').css({'letter-spacing':(cont-width)/length})

Offensichtlich kann dies für die Verwendung von Vanilla js konvertiert werden. Dies ist sogar bei den meisten Schriftstilen, einschließlich Nicht-Mono-Space-Schriften, nützlich.

1
KyleM

Ich denke, was Sie eigentlich suchen, ist das Skalieren.

Rendern Sie Ihre Schriftart mit einer schönen Auflösung, die Sinn macht, und verwenden Sie JS, um sie mithilfe von css-Transformationen in den Container zu strecken:

transform: scale(1.05);

Der Vorteil davon ist, dass Ihr Text immer weiß, aber Sie stoßen auf das Problem, dass er zu klein wird, um lesbar zu sein.

Eine kurze Anmerkung ist, dass Sie das Element, das Sie verkleinern/expandieren möchten, in die absolute Position bringen müssen:

position: absolute;
0
McTrafik

Wenn Sie also an den Rändern dieses Problems knabbern, kombinieren Sie weners answer, die kurze Textzeilen streckt mit diesem Vorschlag, ein reales Element zu verwenden aus einem anderen Thread, können Sie das Ganze auch ohne eine :after-Pseudoklasse erforderlich. 

Sie setzen ein tatsächliches Element ein und platzieren es nach dem Element, das Sie rechtfertigen möchten. Und dies wird auf dieselbe Weise die Ausrichtung der Ausrichtung auslösen:

header {
  background-color: #ace;
  text-align: justify;
}

.hack {
  display: inline-block;
  width: 100%;
}
<header>
  <div>
    A line of text to justify
    <div class="hack"></div>
  </div>
</header>

Mit dieser Variante können Sie diesen Trick mit React- und Style-Objekten verwenden:

const style = {
  backgroundColor: '#ace',
  textAlign: 'justify'
};

const hack = {
  display: 'inline-block',
  width: '100%'
};

const example = (
  <header style={ style }>
    <div>
      A line of words to stretch
      <div style={ hack } />
    </div>
  </header>
);

ReactDOM.render(example, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Das ist schon hässlich und hackig genug, aber von dort müssen Sie Ihr Gift auswählen, auf welche Weise Sie die übermäßige Höhe des Containers "fixieren" möchten: feste Höhe oder negative Ränder für den Container? relative Positionierung und Überlappung aus folgenden Elementen? den Containerhintergrund an den Seitenhintergrund anpassen und so tun, als sei der zusätzliche Rand beabsichtigt?

0
worc