Machen Sie Text vollständig füllen Container und Clip-Mid-Brief an Kanten

Ich versuche, etwas Text über ein Bild, aber möchten Sie den Text von allen Kanten des Containers laufen lassen, ohne den Container zu erweitern. Ich werde für etwas wie folgt aus:Machen Sie Text vollständig füllen Container und Clip-Mid-Brief an Kanten

, wo der Hintergrund Feld ein Bild ist, das breite Vollbild ist und der Text vollständig ausfüllt und Überschreitungen das Bild auf allen Seiten ohne seinen Behälter erstreckt. (Das heißt, das Bild und der Text sollten beide 100% breit sein.) Ich möchte außerdem jedem Wort aus anderen Gründen eine eindeutige ID zuweisen.

Hier ist, was ich gerade habe: fiddle. Bisher konnte ich den Text nicht von der rechten Bildseite ablaufen lassen, wenn ich nicht die Breite #text-overlay auf> 100% setze, was die Breite des Bildcontainers vergrößert.

Ist es möglich, etwas wie hier zu verwenden? Ich wäre dankbar für jede Hilfe, die andere anbieten können!

-Code von Geige:

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

#banner-image { 
    height: 0; 
    padding: 0; 
    padding-bottom: 10%; 
    background: linear-gradient(rgba(0, 0, 0, 0.5), 
    rgba(0, 0, 0, 0.5)), url(http://placekitten.com/150/300); 
    background-position: 0% 0%; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position: relative; 
} 

#text-overlay { 
    position: absolute; 
    max-height: 100%; 
    margin-left: -10px; 
    margin-right: 10px; 
    width: 120%; 
    overflow: hidden; 
    word-spacing: 3px; 
} 

#text-overlay div { 
    float: left; 
    padding-right: 4px; 
    color: red; 
    cursor: pointer; 
} 
</style> 
</head> 

<body> 
<body> 
    <div id="banner-image"> 
    <div id="text-overlay"> 

     <div id="word-number-0">Lorem</div><div id="word-number-1">ipsum</div><div id="word-number-2">dolor</div><div id="word-number-3">sit</div><div id="word-number-4">amet</div><div id="word-number-5">at</div><div id="word-number-6">suas</div><div id="word-number-7">utamur</div><div id="word-number-8">bonorum</div><div id="word-number-9">usu</div><div id="word-number-10">Appareat</div><div id="word-number-11">oportere</div><div id="word-number-12">ad</div><div id="word-number-13">nec</div><div id="word-number-14">meis</div><div id="word-number-15">consulatu</div><div id="word-number-16">vel</div><div id="word-number-17">eu</div><div id="word-number-18">partem</div><div id="word-number-19">equidem</div><div id="word-number-20">duo</div><div id="word-number-21">ne</div><div id="word-number-22">Affert</div><div id="word-number-23">corrumpit</div><div id="word-number-24">no</div><div id="word-number-25">eos</div><div id="word-number-26">Te</div><div id="word-number-27">cum</div><div id="word-number-28">appareat</div><div id="word-number-29">urbanitas</div><div id="word-number-30">laudem</div><div id="word-number-31">meliore</div><div id="word-number-32">appellantur</div><div id="word-number-33">mel</div><div id="word-number-34">te</div><div id="word-number-35">Quo</div><div id="word-number-36">no</div><div id="word-number-37">noster</div><div id="word-number-38">periculis</div><div id="word-number-39">accusamus</div><div id="word-number-40">tale</div><div id="word-number-41">scriptorem</div><div id="word-number-42">ad</div><div id="word-number-43">quo</div><div id="word-number-44">Nec</div><div id="word-number-45">tale</div><div id="word-number-46">partiendo</div><div id="word-number-47">id</div><div id="word-number-48">Eros</div><div id="word-number-49">aliquam</div><div id="word-number-50">vix</div><div id="word-number-51">ei</div><div id="word-number-52">ne</div><div id="word-number-53">eos</div><div id="word-number-54">nulla</div><div id="word-number-55">dolor</div><div id="word-number-56">disputationi</div><div id="word-number-57">No</div><div id="word-number-58">sit</div><div id="word-number-59">soleat</div><div id="word-number-60">facete</div><div id="word-number-61">efficiendi</div><div id="word-number-62">Eu</div><div id="word-number-63">animal</div><div id="word-number-64">integre</div><div id="word-number-65">sed</div><div id="word-number-66">sea</div><div id="word-number-67">no</div><div id="word-number-68">quaeque</div><div id="word-number-69">reformidans</div><div id="word-number-70">His</div><div id="word-number-71">ne</div><div id="word-number-72">homero</div><div id="word-number-73">tritani</div><div id="word-number-74">sed</div><div id="word-number-75">ea</div><div id="word-number-76">odio</div><div id="word-number-77">labore</div><div id="word-number-78">Odio</div><div id="word-number-79">delenit</div><div id="word-number-80">referrentur</div><div id="word-number-81">mel</div><div id="word-number-82">at</div><div id="word-number-83">has</div><div id="word-number-84">an</div><div id="word-number-85">etiam</div><div id="word-number-86">soluta</div><div id="word-number-87">molestie</div><div id="word-number-88">prima</div><div id="word-number-89">cotidieque</div><div id="word-number-90">ea</div><div id="word-number-91">eos</div><div id="word-number-92">Vix</div><div id="word-number-93">iusto</div><div id="word-number-94">tollit</div><div id="word-number-95">aliquid</div><div id="word-number-96">no</div><div id="word-number-97">audiam</div><div id="word-number-98">utamur</div><div id="word-number-99">prodesset</div><div id="word-number-100">ad</div><div id="word-number-101">pri</div><div id="word-number-102">cum</div><div id="word-number-103">dictas</div><div id="word-number-104">reformidans</div><div id="word-number-105">instructior</div><div id="word-number-106">ut</div><div id="word-number-107">Error</div><div id="word-number-108">quidam</div><div id="word-number-109">eu</div><div id="word-number-110">vel</div><div id="word-number-111">at</div><div id="word-number-112">mei</div><div id="word-number-113">aliquip</div><div id="word-number-114">volumus</div><div id="word-number-115">Ei</div><div id="word-number-116">regione</div><div id="word-number-117">aliquid</div><div id="word-number-118">quaerendum</div><div id="word-number-119">est</div><div id="word-number-120">Vel</div><div id="word-number-121">eius</div><div id="word-number-122">malorum</div><div id="word-number-123">at</div><div id="word-number-124">molestie</div><div id="word-number-125">copiosae</div><div id="word-number-126">interesset</div><div id="word-number-127">et</div><div id="word-number-128">cum</div><div id="word-number-129">Cum</div><div id="word-number-130">lorem</div><div id="word-number-131">splendide</div><div id="word-number-132">at</div><div id="word-number-133">debet</div><div id="word-number-134">everti</div><div id="word-number-135">maiestatis</div><div id="word-number-136">ut</div><div id="word-number-137">nam</div><div id="word-number-138">No</div><div id="word-number-139">vim</div><div id="word-number-140">putant</div><div id="word-number-141">liberavisse</div><div id="word-number-142">Ad</div><div id="word-number-143">euismod</div><div id="word-number-144">posidonium</div><div id="word-number-145">his</div><div id="word-number-146">graece</div><div id="word-number-147">quidam</div><div id="word-number-148">utroque</div><div id="word-number-149">eum</div><div id="word-number-150">te</div><div id="word-number-151">Nec</div><div id="word-number-152">ei</div><div id="word-number-153">commodo</div><div id="word-number-154">mentitum</div><div id="word-number-155">te</div><div id="word-number-156">his</div><div id="word-number-157">wisi</div><div id="word-number-158">detracto</div><div id="word-number-159">voluptaria</div><div id="word-number-160">Mei</div><div id="word-number-161">oratio</div><div id="word-number-162">antiopam</div><div id="word-number-163">contentiones</div><div id="word-number-164">et</div><div id="word-number-165">ex</div><div id="word-number-166">animal</div><div id="word-number-167">accommodare</div><div id="word-number-168">mei</div><div id="word-number-169">nullam</div><div id="word-number-170">admodum</div><div id="word-number-171">has</div><div id="word-number-172">at</div><div id="word-number-173">Ne</div><div id="word-number-174">tempor</div><div id="word-number-175">argumentum</div><div id="word-number-176">signiferumque</div><div id="word-number-177">quo</div><div id="word-number-178">nec</div><div id="word-number-179">ea</div><div id="word-number-180">feugiat</div><div id="word-number-181">postulant</div><div id="word-number-182">pri</div><div id="word-number-183">prima</div><div id="word-number-184">labore</div><div id="word-number-185">facete</div><div id="word-number-186">ut</div><div id="word-number-187">Eum</div><div id="word-number-188">gubergren</div><div id="word-number-189">consequat</div><div id="word-number-190">ut</div><div id="word-number-191">Alienum</div><div id="word-number-192">insolens</div><div id="word-number-193">evertitur</div><div id="word-number-194">est</div><div id="word-number-195">an</div><div id="word-number-196">Has</div><div id="word-number-197">ex</div><div id="word-number-198">labores</div><div id="word-number-199">tibique</div><div id="word-number-200">omittantur</div> 

    </div> 
    </div> 
</body> 
</html>

Quelle

2016-04-02 duhaime

Bitte legen Sie einen minimalen, Schnipsel des Problem Code hier. – Rob

Ist die Geige nicht minimal genug? – duhaime

Das Problem mit Fiddles ist, wenn das aus irgendeinem Grund gelöscht werden sollte, diese Frage und die Antworten für andere in Zukunft nutzlos sein werden. – Rob

working fiddle first

Entfernen Sie die Ränder und seltsame Breite und Höhe. Text sollte 100% Breite, 100% Höhe, kein Rand, keine Polsterung sein.
Überlaufgarnitur: versteckt auf die Mutter Behälter (so der Text versteckt, wenn er überläuft)
Jetzt können Sie Text haben, die den Behälter vollständig ausfüllt, keinen Platz auf den Seiten, ohne Überlauf.

Verwenden Sie transform: scale (1.1) (eine beliebige Zahl würde funktionieren), um den Text etwas größer zu machen, so dass es leicht ausläuft.

#banner-image { 
    height: 0; 
    padding: 0; 
    padding-bottom: 40%; 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://placekitten.com/150/300); 
    background-position: 0% 0%; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position: relative; 
    overflow: hidden; 
} 

#text-overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    word-spacing: 3px; 
    transform: scale(1.1); 
}

Quelle

2016-04-02 02:48:22 tayvano

Danke @tayvano! Ich wollte, dass der Text am rechten Rand auch am rechten Rand abgeschnitten wird. Hast du einen Sinn, wie das möglich sein könnte? – duhaime

Ich bin mir nicht sicher, was du meinst? Sie können die Transform-Origin-Eigenschaft ausprobieren, mit der Sie auswählen können, von wo aus sie skaliert werden soll. Standardmäßig skaliert es von der Mitte. https://css-tricks.com/almanac/properties/t/transform-origin/ – tayvano

Oder vielleicht text-align: justify? – tayvano

Machen Sie Text vollständig füllen Container und Clip-Mid-Brief an Kanten

Antwort

Verwandte Themen