Consider the following code snippet (feel free to click and drag outside the text area) - the text wraps when it reaches the viewport border.
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 can we make the text not be affected by the viewport border?
UPDATE: I need the ability to specify both the min-width and max-width attributes for the element.