使文本完全填充容器并剪切边缘的中间字母

Question

我试图在图像上叠加一些文本，但是希望允许文本在没有扩展容器的情况下运行其容器的所有边缘。我正在寻找像这样的东西：

其中背景框是全屏宽的图像，文本完全填充并覆盖所有面上的图像而不扩展其容器。 （也就是说，图像和文本都应该是100％宽。）我还希望为其他原因指定每个单词的唯一ID。

这就是我现在所拥有的：fiddle。到目前为止，除非我将 addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.3.9") 的宽度设置为＆gt;，否则我无法将文字从图像的右侧移开。 100％，它扩展了图像容器的宽度。

是否可以在此处使用#text-overlay之类的内容？我很感激别人能提供的任何帮助！

来自小提琴的代码：

text-overflow

Answer 1

working fiddle first

1. 去除边距和奇怪的宽度和高度。文字应为100％宽度，100％高度，无边距，无填充。

2. 设置溢出：隐藏在父容器上（因此文本在溢出时隐藏）

3. 现在您有完整填充容器的文字，两侧没有空格，没有溢出。

4. 使用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);
   }