Почему нет автоматического разрыва строки в диапазоне?

Две таблицы с редактируемым диапазоном содержимого.

У первого есть автоматический разрыв строки при наборе текста, а у другого нет. Почему? Добавлена простая сравнительная таблица, где оба работают.

Странно, а есть мысли, почему так?

span {width: 100% !important;background-color:#e6e6e6;display: inline-block;}	 
.k2table {table-layout: fixed; width:600px;border-collapse: collapse}
.k2table tr {height:18px} 
.k2table td {text-align: left;padding:1px;white-space: nowrap;} 
.k2table td+td {text-align: right;width:70px;} 
.k2table td+td+td {text-align: right;width:70px;} 
.k2table td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td+td {text-align: right;width:110px;}
.princ {table-layout: fixed; width:600px;border-collapse: collapse}
.princ tr {line-height:18px} 
.princ td {text-align: left;padding:1px;white-space:}

<table class = "k2table">
<tr><td colspan = "6"><span contenteditable = "true"></span></td></tr>
<tr><td><br></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<table class = "princ ht">
<tbody><tr><td><span contenteditable = "true"></span></td></tr>
<tr><td><br></td></tr>
</tbody></table>

Simple comparison
<table width = "400">
  <tr>
  <td>
  <span contenteditable = "true" style = "display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
</table>

<table width = "400">
  <tr>
  <td colspan = "2">
  <span contenteditable = "true" style = "display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
  <tr>
  <td>
  1
  </td>
    <td>
  2
  </td>
  </tr>

  
</table>

html contenteditable line-breaks

03.04.2019 22:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что ваше правило CSS для вашего во второй таблице отсутствует значение nowrap для свойства white-space. Для справки здесь приведены два правила CSS, вызывающие несоответствие между двумя таблицами.

.k2table td {text-align: left;padding:1px;white-space: nowrap;}

.princ td {text-align: left;padding:1px;white-space:}

Вы, вероятно, захотите изменить свой селектор CSS .pric td на следующее:

.princ td {text-align: left;padding:1px;white-space:nowrap}

тогда обе таблицы будут работать одинаково. Для полноты картины я отредактировал вашу песочницу кода с помощью вышеупомянутого исправления.

span {width: 100% !important;background-color:#e6e6e6;display: inline-block;}	 
.k2table {table-layout: fixed; width:600px;border-collapse: collapse}
.k2table tr {height:18px} 
.k2table td {text-align: left;padding:1px;white-space:nowrap;} 
.k2table td+td {text-align: right;width:70px;} 
.k2table td+td+td {text-align: right;width:70px;} 
.k2table td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td+td {text-align: right;width:110px;}
.princ {table-layout: fixed; width:600px;border-collapse: collapse}
.princ tr {line-height:18px} 
.princ td {text-align: left;padding:1px;white-space:nowrap}

<table class = "k2table">
<tr><td colspan = "6"><span contenteditable = "true"></span></td></tr>
<tr><td><br></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<table class = "princ ht">
<tbody><tr><td><span contenteditable = "true"></span></td></tr>
<tr><td><br></td></tr>
</tbody></table>

Simple comparison
<table width = "400">
  <tr>
  <td>
  <span contenteditable = "true" style = "display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
</table>

<table width = "400">
  <tr>
  <td colspan = "2">
  <span contenteditable = "true" style = "display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
  <tr>
  <td>
  1
  </td>
    <td>
  2
  </td>
  </tr>

  
</table>

Надеюсь, это поможет!

04.04.2019 01:02

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

Как получить начальное значение и значение setState для ввода contentEditable в ReactJS?

Как получить текст из редактируемого содержимого div с помощью С#

Firefox не может установить фокус на определенные элементы DOM с помощью JavaScript

Странное поведение редактируемого div при попытке обновить переменную с текстовым содержимым в редактируемом div в angular. Любые объяснения?

Использование элемента в contentEditable требует двух кликов для первого редактирования

Вставьте пользовательский html в редактор quill

Как получить div, где курсор присутствует в contenteditable div?

Простой HTML-редактор и получение HTML-контента с помощью div или textarea

Как настроить вставленные элементы div из contentEditable на разрывы строк?

У меня есть contenteditable div , и внутри него находится нередактируемый диапазон, как пометить текст div долгим щелчком по тексту диапазона

Почему нет автоматического разрыва строки в диапазоне?

Ответы 1

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

Похожие вопросы