html - 使文本完全填充容器并在边缘夹住中间字母

我正在尝试在图像上分层一些文本，但希望允许文本从其容器的所有边缘延伸，而不扩展容器。我想要这样的东西:

其中背景框是全屏宽的图像，文本完全填充并超出图像的所有侧面，而不扩展其容器。 (也就是说，图像和文本都应该是 100% 宽。)出于其他原因，我还希望为每个单词分配一个唯一的 id。

这是我现在拥有的:fiddle 。到目前为止，我还无法让文本从图像的右侧运行，除非我将 #text-overlay 的宽度设置为 > 100%，这会扩展图像的宽度容器。

这里可以使用像text-overflow这样的东西吗？对于其他人可以提供的任何帮助，我将不胜感激!

fiddle 代码:

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

最佳答案

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

关于html - 使文本完全填充容器并在边缘夹住中间字母，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36368329/

html - 使文本完全填充容器并在边缘夹住中间字母

上一篇：javascript - 打印分页表(simplePagination.js by flaviusmatis)

下一篇：html - 绝对 Div 之后的 CSS Div 定位