Переполнение текста из тега div

Обнаружена проблема с переполнением текста из тега div. Я пытаюсь создать веб-приложение, которое удалит все пробелы из текста, и я успешно выполнил логику, и код работает нормально. Однако проблема заключается в дизайне. тег p, заключенный в тег div, на который перенаправляется отредактированный текст, отображает текст, но переполняет область просмотра и приводит к нему скроллер. (Код выполняется только для однострочного текста, как только строка превышает макет ломается.)

Решение, которое я пробовал:

  • Пробовал изменить размер тега div.
  • Пробовал изменить размер тега p.
  • Пытался изменить количество элементов, которые идут для редактирования пробелов (например, 100 символов). Так, чтобы код оставался в одной строке. (Работает только для однострочного текста).

let text1 = document.querySelector('input');
let btn = document.querySelector('button');
let text2 =  document.querySelector('p');

function array(input){
  let arr = [];
  var j = 0;
  for(let i = 0; i <= input.length ; i++){
    if(input[i] != ' '){
      arr.push(input[i]);
    }
  }
  return arr;
}

btn.addEventListener('click',function(){
  let nospace = array(text1.value).join('');
  text2.innerHTML = nospace;
});
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Code Minimizer</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="containerfull">
    <h1>White Space Remover</h1>

    <div class="contanerquote1">
      <h2>Enter The Text Here : </h2>
      <input class="form-control" type="text" name="" value="">
      <br>
      <button type="button" class="btn btn-success" name="button">Submit</button>
      <h2>Your Edited Text Is Here : </h2>
    </div>

    <div class="containerquote2">
      <p></p>
    </div>
  </div>

  <script src="index.js" charset="utf-8"></script>
</body>

</html>

Где твой "CSS"? Я вижу, у вас есть такие классы, как containerfull, но вы не показываете правила CSS в своем вопросе. Полоса прокрутки вступит в игру, когда содержимое выйдет за пределы окна «браузера»? Это ожидаемое поведение.

mardubbles 10.04.2022 05:26

«макет ломается» - не могли бы вы описать, каким вы хотите, чтобы макет был? Вы хотите, чтобы символы переносились (то есть элемент p имел максимальную ширину)?

A Haworth 10.04.2022 08:48
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
2
41
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В выходном тексте нет пробелов, поэтому тег p не будет работать обычным образом. Обычно разрывы строк заменяются пробелами, чтобы текст соответствовал ширине контейнера. Когда нет пробелов, этого не происходит. Если вы не хотите, чтобы горизонтальная полоса прокрутки отображалась, вы можете использовать p{overflow-x:hidden} Кроме того, вы можете использовать JS для вставки тега <br> в вывод через каждые x символов, например:

letters = "hellohellohellohellohellohellohello"
letters = letters.split("")
newLetters = []
linebreak = 5

for (var i = 0; i < letters.length; i++) {
    newLetters.push(letters[i])
    if (i % linebreak == 0){
    newLetters.push("<br>")
    }
}

newLetters = newLetters.join("");
Ответ принят как подходящий

Чтобы убедиться, что система показывает весь текст, независимо от его длины или ширины элемента p, вы можете заставить CSS разрываться в середине слова (в данном случае «словом» является весь ваш текст).

Вот простая демонстрация:

p {
  overflow-wrap: break-word;
}
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

Преимущество этого метода в том, что вам не нужно добавлять в текст ложные разрывы строк.

Другие вопросы по теме