我正在尝试创建一个非常基本的meme生成器来练习一些基本的jQuery并遇到一些小问题。
以下是我如何设置它的基础知识......现在。
1。）你可以点击三个样本图像，这些图像将填入div的内部，＆＃34; meme＆＃34;单击时在页面顶部。 2.）用户可以使用我创建的两个输入表单来放置顶部文本和底部文本。
一切都与此有关，但我相信我面临的问题是更多的CSS相关，但我不太确定，因为我是jQuery的初学者。
我所说的问题是，在col-sm-6里面，meme图像和顶部文本和底部文本就位，用户可以键入的文本将继续运行并打破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>
感谢您提供任何帮助！
答案 0 :(得分：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>var names = ['Hannah', 'Lucy', 'Brenda', 'Lauren', 'Mary'];
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
function likeOrDislike(){
var off = true;
document.getElementById('likeButton').onClick = function(){
var off = false;
}
document.getElementById('dislikeButton').onClick = function(){
var off = true;
}
if(off = false) {
liked.push(names[0])
names.splice(0, 1)
}
else if (off = true) {
disliked.push(names[0])
names.splice(0, 1)
}
};
答案 1 :(得分：0)
尝试<canvas>。看到它的实际应用：http://codepen.io/johano/pen/emNRmb
您可以轻松地将<canvas>元素转换为base64图像字符串并将其另存为图像。你不需要jQuery。只是纯粹的香草。