javascript - MEME-Generator(jQuery和CSS帮助)

我试图创建一个非常基本的模因生成器来练习一些基本的jQuery，但遇到了一个小问题。

这是我现在如何设置工作的基础。

1.）您可以单击三个示例图像，单击它们后，这些图像将填充在div的内部，其ID为“ meme”。
2）用户可以使用我创建的两个输入表单来放置顶部文本和底部文本。

一切都与此有关，但是我相信我所面临的问题更多与CSS相关，但是我不太确定，因为我是jQuery的初学者。

我要说的问题是，在模因图像，顶部文本和底部文本所在的col-sm-6内部，用户可以键入的文本将继续存在并从col-sm-6容器中跳出，继续。

但是，我可以通过在CSS的每个文本部分中设置overflow：hidden来停止此操作，但是文本仍然跨越col-sm-6容器的完整显示，大于实际图像。

我的主要目标是使文本在碰到图像的边界时自动换行，而不是实际的col-sm-6外部容器。我知道我正在使用引导程序，因此该列在这里无法正常工作，但是如果您在结果窗口中使用meme gen，它将起作用，并且您仍然可以看到文本超出了图像的大小。

$(document).ready(function() {
  $('#meme-controls').on('keyup','#top-text-input', function() {
      $('#top-text').text($(this).val());
  });
  $('#meme-controls').on('keyup','#btm-text-input', function() {
      $('#btm-text').text($(this).val());
  });
  $('#meme-samples').on('click','img', function() {
    $('#meme').empty().append($(this).data('src'));
  });
});

#meme {
  position: relative;
}

#meme-samples {
  cursor: pointer;
}

#top-text {
  top: 10px;
  margin: 0 auto;
  right: 0;
  left: 0;
  color: red;
  position: absolute;
  overflow: hidden;
}

#btm-text {
  bottom: 10px;;
  margin: 0 auto;
  right: 0;
  left: 0;
  color: red;
  position: absolute;
  overflow: hidden;
}

<!-- MEME Display -->
<div class="container">
  <div class="row text-center">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <div id="meme"></div>
      <h2 id="top-text"></h2>
      <h2 id="btm-text"></h2>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

<!-- MEME Controls -->
<div id="meme-controls" class="container">
  <div class="row text-center">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
    <input type="text" id="top-text-input" class="form-control" placeholder="Top Text Goes Here."><br>
    <input type="text" id="btm-text-input" class="form-control" placeholder="Bottom Text Goes Here."><br>
    <div class="col-sm-3"></div>
  </div>
</div>

<!-- MEME Sample Photos-->
<div id="meme-samples" class="container">
  <div class="row text-center">
    <div class="col-sm-4">
      <img src="https://makeameme.org/media/templates/250/willy_wonka_sarcasm_meme.jpg" data-src="<img src='https://makeameme.org/media/templates/250/willy_wonka_sarcasm_meme.jpg'>">
    </div>
    <div class="col-sm-4">
      <img src="https://makeameme.org/media/templates/250/game_of_thrones_meme.jpg" data-src="<img src='https://makeameme.org/media/templates/250/game_of_thrones_meme.jpg'>">
    </div>
    <div class="col-sm-4">
      <img src="https://makeameme.org/media/templates/250/the_most_interesting_man_in_the_world.jpg" data-src="<img src='https://makeameme.org/media/templates/250/the_most_interesting_man_in_the_world.jpg'>">
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

谢谢你提供的所有帮助！

最佳答案

将图像和文本放在#meme中，并用display: inline-block折叠（根据情况，您也可以使用float或其他方法）。文本的扩展宽度不会大于#meme的宽度，该宽度只会与图像一样大。

$(document).ready(function() {
  $('#meme-controls').on('keyup','#top-text-input', function() {
      $('#top-text').text($(this).val());
  });
  $('#meme-controls').on('keyup','#btm-text-input', function() {
      $('#btm-text').text($(this).val());
  });
  $('#meme-samples').on('click','img', function() {
    $('#meme-image').attr('src', $(this).attr('src')); /* use selected image's src */
    $('#meme-image').show();
  });
});

#meme {
  position: relative;
  display: inline-block; /* collapse container */
}

#meme-samples {
  cursor: pointer;
}

#top-text {
  top: 10px;
  margin: 0 auto;
  right: 0;
  left: 0;
  color: red;
  position: absolute;
  overflow: hidden;
}

#btm-text {
  bottom: 10px;;
  margin: 0 auto;
  right: 0;
  left: 0;
  color: red;
  position: absolute;
  overflow: hidden;
}

<!-- MEME Display -->
<div class="container">
  <div class="row text-center">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <div id="meme"> <!-- use #meme to contain image and text -->
        <h2 id="top-text"></h2>
        <h2 id="btm-text"></h2>
        <img id="meme-image" style="display: none;" />
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

<!-- MEME Controls -->
<div id="meme-controls" class="container">
  <div class="row text-center">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
    <input type="text" id="top-text-input" class="form-control" placeholder="Top Text Goes Here."><br>
    <input type="text" id="btm-text-input" class="form-control" placeholder="Bottom Text Goes Here."><br>
    <div class="col-sm-3"></div>
  </div>
</div>

<!-- MEME Sample Photos-->
<div id="meme-samples" class="container">
  <div class="row text-center">
    <div class="col-sm-4">
      <img src="https://makeameme.org/media/templates/250/willy_wonka_sarcasm_meme.jpg" data-src="<img src='https://makeameme.org/media/templates/250/willy_wonka_sarcasm_meme.jpg'>">
    </div>
    <div class="col-sm-4">
      <img src="https://makeameme.org/media/templates/250/game_of_thrones_meme.jpg" data-src="<img src='https://makeameme.org/media/templates/250/game_of_thrones_meme.jpg'>">
    </div>
    <div class="col-sm-4">
      <img src="https://makeameme.org/media/templates/250/the_most_interesting_man_in_the_world.jpg" data-src="<img src='https://makeameme.org/media/templates/250/the_most_interesting_man_in_the_world.jpg'>">
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>