5

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

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.calculator-grid>button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background-color: rgba(255, 255, 255, .75);
}

.calculator-grid>button:hover {
  background-color: rgba(255, 255, 255, .9);
}

.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, .75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

.output .previous-operand {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Calculator</title>
  <link href="styles.css" rel="stylesheet">
  <script src="script.js" defer></script>
</head>

<body>
  <div class="calculator-grid">
    <div class="output">
      <div data-previous-operand class="previous-operand"></div>
      <div data-current-operand class="current-operand"></div>
    </div>
    <button data-all-clear>AC</button>
    <button data-clear>C</button>
    <button data-operation>pow</button>
    <button data-operation>÷</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation>+</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-operation>sqrt</button>
    <button data-equals>=</button>
  </div>
</body>

</html>

previous operand и current operand - окна вывода этих чисел передача в них текста осуществляется следующим образом:

integerDisplay = integerDigits.toLocaleString('ru', {maximumFractionDigits: 0})

Далее:

 this.currentOperandTextElement.innerText = integerDisplay;

при использовании white-space: pre-wrap текст не переносится вообще при innerText, если текст вводить в саму разметку, все работает. при white-space

2
  • 1
    @UModeL добавил
    – SomVolodya
    27 сен 2020 в 16:44
  • если время терпит, то вечером займусь вашим вопросом плотнее - там подводных камней навалом, на самом деле.
    – UModeL
    28 сен 2020 в 5:14

1 ответ 1

3

Если у Вас автоматом добавляются пробелы для разрядов, то решение простое - white-space: pre-wrap:

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.calculator-grid>button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background-color: rgba(255, 255, 255, .75);
}

.calculator-grid>button:hover {
  background-color: rgba(255, 255, 255, .9);
}

.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, .75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  /*word-wrap: break-word;
  word-break: break-all;*/
  white-space: pre-wrap;
}

.output .previous-operand {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
  white-space: pre-wrap;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Calculator</title>
  <link href="styles.css" rel="stylesheet">
  <script src="script.js" defer></script>
</head>

<body>
  <div class="calculator-grid">
    <div class="output">
      <div data-previous-operand class="previous-operand" contenteditable>555 555 555 555 555 555 555 555 555</div>
      <div data-current-operand class="current-operand"contenteditable>555 555 555 555 555 555 555 555 555</div>
    </div>
    <button data-all-clear>AC</button>
    <button data-clear>C</button>
    <button data-operation>pow</button>
    <button data-operation>÷</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation>+</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-operation>sqrt</button>
    <button data-equals>=</button>
  </div>
</body>

</html>

Добавил input для теста вставки с помощью JS через innerText:

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.calculator-grid>button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background-color: rgba(255, 255, 255, .75);
}

.calculator-grid>button:hover {
  background-color: rgba(255, 255, 255, .9);
}

.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, .75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  /*word-wrap: break-word;
  word-break: break-all;*/
  white-space: pre-wrap;
}

.output .previous-operand {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
  white-space: pre-wrap;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Calculator</title>
  <link href="styles.css" rel="stylesheet">
  <script src="script.js" defer></script>
</head>

<body>
  <input class="test" oninput="document.querySelector('.current-operand').innerText = this.value;">
  <div class="calculator-grid">
    <div class="output">
      <div data-previous-operand class="previous-operand">555 555 555 555 555 555 555 555 555</div>
      <div data-current-operand class="current-operand">555 555 555 555 555 555 555 555 555</div>
    </div>
    <button data-all-clear>AC</button>
    <button data-clear>C</button>
    <button data-operation>pow</button>
    <button data-operation>÷</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation>+</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-operation>sqrt</button>
    <button data-equals>=</button>
  </div>
</body>

</html>

5
  • К сожалению, почему то с innerText не работает, хотя передаю в него уже строку с пробелами. И если использовать только white-spacing, то число перестает вообще переноситься
    – SomVolodya
    27 сен 2020 в 17:39
  • @SomVolodya: Вы contenteditable из моего кода убрали? Оно только для тестов. Здесь же работает, так?
    – UModeL
    27 сен 2020 в 17:42
  • да, убрал, но это не работает с js-ом, почему то, хотя с word-break текст переносится, только не так, как мне нужно
    – SomVolodya
    27 сен 2020 в 17:50
  • @SomVolodya: что-то Вы не так вставляете. Дополнил ответ - тестируйте.
    – UModeL
    27 сен 2020 в 18:00
  • @SomVolodya: скрипт или регулярка, которые разбивают число, должны разбивать простым &#32;, но не &nbsp; ! Проверьте.
    – UModeL
    27 сен 2020 в 18:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.