How to disable text wrapping when viewport border is reached? - html

Question

Consider code snippet below (you can click and drag outside the text) - the text is wrapping when viewport border is reached.
let isCaptureActive = false;
let offset = {
x: 0,
y: 0
}
const fooDOM = document.querySelector('#foo');
const bodyDOM = document.body;
window.addEventListener('mousemove', e => {
if(!isCaptureActive) return;
offset.x += e.movementX;
offset.y += e.movementY;
fooDOM.style.left = offset.x + 'px';
fooDOM.style.top = offset.y + 'px';
});
window.addEventListener('mousedown', e => {
if(e.target !== fooDOM) isCaptureActive = true;
});
window.addEventListener('mouseup', e => {
isCaptureActive = false;
});
#foo {
position: absolute;
background-color: wheat;
min-width: 250px;
max-width: 500px;
}
<div id="foo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nisl justo, id rutrum lorem cursus in. Nullam dictum lobortis lorem, vitae facilisis lectus. Donec ut eros lacinia, suscipit nisl ut, convallis diam.
</div>
How to make text ignore viewport border like it's not even there?
EDIT: I need to be able to set the element's min-width and max-width attributes.

Answer 1

let isCaptureActive = false;
let offset = {
x: 0,
y: 0
}
const fooDOM = document.querySelector('#foo');
const bodyDOM = document.body;
window.addEventListener('mousemove', e => {
if(!isCaptureActive) return;
offset.x += e.movementX;
offset.y += e.movementY;
fooDOM.style.left = offset.x + 'px';
fooDOM.style.top = offset.y + 'px';
});
window.addEventListener('mousedown', e => {
if(e.target !== fooDOM) isCaptureActive = true;
});
window.addEventListener('mouseup', e => {
isCaptureActive = false;
});
#foo {
position: absolute;
background-color: wheat;
min-width: 250px;
max-width: 500px;
}
#pg {
width: 100vw;
}
<div id="foo">
<p id='pg'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta nisl justo, id rutrum lorem cursus in. Nullam dictum lobortis lorem, vitae facilisis lectus. Donec ut eros lacinia, suscipit nisl ut, convallis diam.
</p>
</div>
I simply wrapped the text inside a <p> element and set its width to 100vw.