テキストを完全にコンテナに塗りつぶし、端にクリップの中間文字を付けます。

イメージの上に何らかのテキストを重ねようとしていますが、コンテナを拡張せずにテキストをコンテナのすべての端からはみ出せます。背景ボックスは、フルスクリーンワイドだ画像であり、テキストが完全にそのコンテナを拡張することなく、すべての面に画像を満たし、オーバーランテキストを完全にコンテナに塗りつぶし、端にクリップの中間文字を付けます。

：私はちょうどこのような何かのために行きますよ。（つまり、画像とテキストの両方が100％幅でなければなりません）。私はまた、他の理由で各単語に一意のIDを割り当てたいと考えています。

ここに私が今いるものはfiddleです。ここまでは、#text-overlayの幅を> 100％に設定しない限り、画像の右側から逃げ出すテキストを得ることができませんでした。これはイメージコンテナの幅を広げます。

text-overflowのようなものを使用できますか？私は他人が提供できるどんな助けでも感謝しています！フィドルから

コード：

<!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>

出典

2016-04-02 duhaime

ここで問題のコードの最小、スニペットを含めてください。 – Rob

フィドルは十分に最小限ではありませんか？ – duhaime

Fiddlesの問題は、それが何らかの理由で削除されなければならない場合、この質問とその回答は将来他の誰にとっても役に立たないということです。 – Rob

working fiddle first

マージンや奇妙な幅と高さを削除します。テキストは幅100％、高さ100％、余白なし、パディングなしにする必要があります。
セットオーバーフロー：親コンテナに隠された（それがオーバーフローするときにテキストが非表示になります）
今、あなたは完全にコンテナを満たすテキスト、サイドにスペースなし、なしオーバーフローを持っています。

transform：scale（1.1）（任意の数値が有効）を使用して、テキストを少し大きくして、それほど僅かしか出ないようにします。

#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); 
}

出典

2016-04-02 02:48:22 tayvano

ありがとう@tayvano！私は、右端のテキストも右端で右にクリップすることを望んでいました。それがどうやって起こるかも知れませんか？ – duhaime

あなたはどういう意味が分かりませんか？ transform-originプロパティを試すと、スケール元のプロパティを選択できます。デフォルトでは、中央からの縮尺です。 https://css-tricks.com/almanac/properties/t/transform-origin/ – tayvano

または、おそらくテキスト整列：正当化？ – tayvano

テキストを完全にコンテナに塗りつぶし、端にクリップの中間文字を付けます。

答えて

関連する問題