Блог

Главная - Вопросы по программированию - Как отключить перенос текста при достижении границы области просмотра?

Как отключить перенос текста при достижении границы области просмотра?

#html #css

#HTML #css

Вопрос:

Рассмотрим фрагмент кода ниже (вы можете щелкнуть и перетащить за пределы текста) — текст переносится при достижении границы области просмотра.

 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 .

Комментарии:

1. Боюсь, это невозможно, если вы установите a min-width и a max-width . Контейнер будет изменять свою ширину в зависимости от того, сколько места доступно. Если вы перемещаете элемент близко к границам области просмотра, ширина контейнера уменьшается, поскольку доступное пространство сужается. Вот как работает CSS.

Ответ №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>

Я просто обернул текст внутри <p> элемента и установил его ширину в 100 вт.

Комментарии:

1. Я не думаю, что автор намеревается переполнить foo контейнер.

2. как он сказал, как отключить перенос слов.