时间戳

首页 > 解决方案 > 达到视口边框时如何禁用文本环绕？

html - 达到视口边框时如何禁用文本环绕？

问题描述

考虑下面的代码片段（您可以在文本外单击并拖动） - 到达视口边界时文本会换行。

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>

如何让文本忽略视口边框，就像它甚至不存在一样？

编辑：我需要能够设置元素min-width和max-width属性。

标签： htmlcss

解决方案

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>

我只是将文本包裹在一个<p>元素中并将其宽度设置为 100vw。

推荐阅读