Not able to Customize "Copy To ClipBoard" button

Question

I have integrated copy to clipboard button with the code box. Problem is that I want the button to localized to the right top corner but I am unable to customize it moreover words are going out of the code box tried word-break but no effect. button not working properly please help some. I didn't want overflow: hidden property.

     
    function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // Internet Explorer
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    }
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy,
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

.codebox { background-color: #f3f3f6; border-radius: .25rem; padding: 2.25rem 2.25rem 2.25rem 2.5rem; margin: 1.2rem 0 1.2rem; border: 2px solid #d5d5d8; position: relative; } 
.codebox:before{ content: ''; position: absolute; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA4Ij4KICA8cGF0aCBkPSJNNTIgN2MtMy4yIDAtMy4yLTMtNi41LTMtMy4yIDAtMy4yIDMtNi41IDNzLTMuMy0zLTYuNS0zYy0zLjMgMC0zLjMgMy02LjUgM3MtMy4yLTMtNi41LTNjLTMuMiAwLTMuMiAzLTYuNSAzLTMuMiAwLTMuMi0zLTYuNS0zUzMuMyA3IDAgN3YxaDUyVjd6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2YzZjNmNiIvPgogIDxwYXRoIGQ9Ik01MiA2Yy0zLjIgMC0zLjItMy02LjUtMy0zLjIgMC0zLjIgMy02LjUgM3MtMy4zLTMtNi41LTNjLTMuMyAwLTMuMyAzLTYuNSAzcy0zLjItMy02LjUtM2MtMy4yIDAtMy4yIDMtNi41IDMtMy4yIDAtMy4yLTMtNi41LTNTMy4zIDYgMCA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNWQ1ZDgiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-size: cover; top: -7px; left: 20px; width: 52px; height: 8px; } 
.codebox p{font-size:16px;margin-left: 29px;margin-bottom: 0;} 
.codebox p:before{ content: ''; width: 1.5rem;margin-left: 16px; height: 1.5rem;left: -4px; position: absolute; top: 21px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS41IDI1LjQiPgogIDxjaXJjbGUgY3g9IjEyLjgiIGN5PSIxMi43IiByPSIxMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmOWVkNDMiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIxLjIiLz4KICA8cGF0aCBkPSJNOC40IDhWNi40YzAtLjQuNC0uNy44LS43aDguNmMuNCAwIC43LjMuNy43djEyLjFjMCAuNC0uMy43LS43LjdIMTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMzQ0NDRjIi8+CiAgPHBhdGggZD0iTTcuOCA3LjNoOC4xYy40IDAgLjcuMy43Ljd2MTEuNmMwIC40LS4zLjctLjcuN0g3LjhjLS40IDAtLjctLjMtLjctLjdWOC4xYy0uMS0uNC4zLS44LjctLjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Y2OGM1MCIgc3Ryb2tlPSIjZjY4YzUwIiBzdHJva2Utd2lkdGg9Ii41Ii8+CiAgPHBhdGggZD0iTTE1LjIgMTJIOC41TTE1LjIgMTAuMkg4LjVNMTUuMiAxMy44SDguNU0xNS4yIDE1LjhIOC41TTExLjggMTcuNUg4LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIuOTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K); }
 

<pre id="markup">
                    <div class="codebox"><p>
                        Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.
    </div>
    </pre>

Answer 1

To allow the user to see all the code you can use one of the options defined in MDN.

white-space: pre-wrap

would seem to be what you need.

To move the button you probably want to place it top right, maybe with some margin, up to you.

This snippet adds the white-space and moves the input button with CSS.

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // Internet Explorer
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    }
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el);
    copy_btn.onclick = function() {
        selectElementContents(el.querySelector('.codebox'));
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy,
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

.codebox { background-color: #f3f3f6; border-radius: .25rem; padding: 2.25rem 2.25rem 2.25rem 2.5rem; margin: 1.2rem 0 1.2rem; border: 2px solid #d5d5d8; position: relative; } 
.codebox:before{ content: ''; position: absolute; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA4Ij4KICA8cGF0aCBkPSJNNTIgN2MtMy4yIDAtMy4yLTMtNi41LTMtMy4yIDAtMy4yIDMtNi41IDNzLTMuMy0zLTYuNS0zYy0zLjMgMC0zLjMgMy02LjUgM3MtMy4yLTMtNi41LTNjLTMuMiAwLTMuMiAzLTYuNSAzLTMuMiAwLTMuMi0zLTYuNS0zUzMuMyA3IDAgN3YxaDUyVjd6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2YzZjNmNiIvPgogIDxwYXRoIGQ9Ik01MiA2Yy0zLjIgMC0zLjItMy02LjUtMy0zLjIgMC0zLjIgMy02LjUgM3MtMy4zLTMtNi41LTNjLTMuMyAwLTMuMyAzLTYuNSAzcy0zLjItMy02LjUtM2MtMy4yIDAtMy4yIDMtNi41IDMtMy4yIDAtMy4yLTMtNi41LTNTMy4zIDYgMCA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNWQ1ZDgiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-size: cover; top: -7px; left: 20px; width: 52px; height: 8px; } 
.codebox p{font-size:16px;margin-left: 29px;margin-bottom: 0;} 
.codebox p:before{ content: ''; width: 1.5rem;margin-left: 16px; height: 1.5rem;left: -4px; position: absolute; top: 21px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS41IDI1LjQiPgogIDxjaXJjbGUgY3g9IjEyLjgiIGN5PSIxMi43IiByPSIxMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmOWVkNDMiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIxLjIiLz4KICA8cGF0aCBkPSJNOC40IDhWNi40YzAtLjQuNC0uNy44LS43aDguNmMuNCAwIC43LjMuNy43djEyLjFjMCAuNC0uMy43LS43LjdIMTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMzQ0NDRjIi8+CiAgPHBhdGggZD0iTTcuOCA3LjNoOC4xYy40IDAgLjcuMy43Ljd2MTEuNmMwIC40LS4zLjctLjcuN0g3LjhjLS40IDAtLjctLjMtLjctLjdWOC4xYy0uMS0uNC4zLS44LjctLjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Y2OGM1MCIgc3Ryb2tlPSIjZjY4YzUwIiBzdHJva2Utd2lkdGg9Ii41Ii8+CiAgPHBhdGggZD0iTTE1LjIgMTJIOC41TTE1LjIgMTAuMkg4LjVNMTUuMiAxMy44SDguNU0xNS4yIDE1LjhIOC41TTExLjggMTcuNUg4LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIuOTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K); }

#markup {
  white-space: pre-wrap;
}

input {
  transform: translateX(calc(100vw - 100% - 50px));
  margin: 20px;
}

<pre id="markup">
                    <div class="codebox"><p>
                        Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.
    </div>
    </pre>

You need to check that the white space setting is giving you what you want and also you need to check that the system is selecting only that code text, not all.

UPDATE: I checked the area that was being selected and it was taking the whole markup element's contents, not just the codebox. Now corrected with:

    selectElementContents(el.querySelector('.codebox'));

in the make_copy_button function.

UPDATE 2: the requirement was to position the input button above the codebox, not to have it at the top right. The snippet has been altered to change the HTML so the input element is before the code, not after it as originally. The CSS has been altered to move it to the right of the viewport. You need to look at the positioning and margins to decide exactly what you want.