CODEWITHSUNDEEP
htmlword-wrapweebly
S.B.
S.B.

Reputation: 1

How to word wrap text with Weebly HTML embed code element?

I'm trying to use the embed code element on the weebly website builder to create a button that hides a paragraph of text where when it is pushed it reveals the text and then the button can be pressed again to hide the text once more (like spoilers for a story on a wiki page). The button itself is working, however every time I reveal the text of the concealed words the words flow off the side of the page and a horizontal scroll bar appears at the bottom of the programmed element. A screenshot of what this looks like has been pasted below. enter image description here

What I want to happen is for the text to reach the edge of the text box and wrap around to the beginning again, like a regular weebly text box would. I KNOW the solution to this is probably simple, but I've tried everything I can find on my own and I cannot figure out what needs to be done to make this happen. If someone could help me figure out what my code is missing to fix this word wrap problem, I would be extremely grateful.

(Please explain it to me like I'm 5, I took coding classes years ago and I'm extremely code illiterate.)

My code for this element is the following:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.center {
    margin: auto;
    width: 200%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}

</style>
</head>

<body>
<div class="center hideform">
    <button id="close">Hide Spoilers</button>
    <br>
    <br><p>
<!-- START SPOILERS HERE -->
TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING 
    <br>
    <br>
TESTING TESTING TESTING TESTING
<!-- END SPOILERS HERE -->
    <br>
    <br></p>
</div>


<button id="show">Show Spoilers</button>
<script>
$('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})
</script>
</body>
</html>

Upvotes: 0

Views: 42

Answers (0)

Related Questions