javascript - MEME 生成器(jQuery 和 CSS 帮助)

Question

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

这是我如何设置它以使其正常工作的基础知识……目前。

1.) 您可以单击三个示例图像，这些图像将填充到 div 中，单击时会在页面顶部显示 id，“meme”。 2.) 用户可以使用我创建的两个输入表单来放置顶部文本和底部文本。

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

我说的问题是，在模因图像、顶部文本和底部文本所在的 col-sm-6 内部，用户可以键入的文本将继续前进并突破 col-sm- 6个容器，继续前进。

但是，我能够通过在 css 的每个文本部分中设置 overflow: hidden 来阻止它，但是文本仍然跨越 col-sm-6 容器的整个区域，这比实际的要大图片。

我的主要目标是让文本在碰到图像边界时换行，而不是实际的外部 col-sm-6 容器。我知道我使用的是 bootstrap，所以该列在这里不起作用，但如果您在结果窗口中使用 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>

感谢您提供的任何帮助!

Answer 1

将图片和文字放在#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>