Обновление 3 (Демо 3)
Изменения
Я заметил, что в самом текущем OP-коде больше нет position: relative, что хорошо, но я поверьте, это было забыто:
<span class='pagebreak spacer'contenteditable="false"></span>
Я полагаю, что вы изначально использовали contenteditable="false", чтобы дать вашим .pagebreak дополнительную функциональность, а также предотвратить их удаление, поэтому я добавил их обратно.
Сравнение
Демонстрация 3 содержит мое решение рядом с OP-кодом для сравнения поведения . Демонстрация 3 также содержит две кнопки (по одной для каждого редактора контента), которые выделяют все <span> текста. Ниже приведен список классов из кода OP (редактор содержимого справа) и список всех классов, эквивалентных моему коду (редактор содержимого слева).
div.textframe................section.editorp.textOutline................article.contentspan.flowbox.spacer......mark.vertRulespan.pagebreak.spacer ..mark.breaker
Есть 2 требования, которые беспокоят ОП:
При щелчке по пустым областям вокруг <span>s курсор переместится в угол области содержимого.
Количество символов в строке должно соответствовать текущей емкости OP-кода.
Эта проблема существует уже много лет, но причина в туманности, поэтому, если вы относитесь к этой аберрации как к простому поведению, вы можете просто противостоять ей, прививая другое поведение.
Demo2 и Demo3 соответствуют этим критериям, просто применяя следующие наборы правил стиля:
Демонстрация 2
article p {display: table;...
Демонстрация 3
.content {display:table-cell;...
Поведение таблиц-ячеек жесткое и хорошо зарекомендовавшее себя, и, насколько мне известно, это единственные не-замененный элемент, который по умолчанию соответствует своему содержимому и соответствует окружающим элементам таблицы. В качестве бонуса элемент с display: table-cell (не <td>) не обязательно должен быть вложен в <tr> внутри <table>. <час>
Демо 3
.content { display: table-cell;...
/* Begin Defaults */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
background: white;
font: 400 16px/1.45 Arial;
height: 100%;
width: 100%;
}
/* End Defaults */
/* Begin Optional Layout */
#page01 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
background: rgba(45, 99, 198, 0.6);
margin: 0 auto 20px;
height: fit-content;
min-width: 100%
}
/* End Optional Layout */
/* Begin Primary Styles */
.editor {
width: 350px;
height: 600px;
border: 1px solid black;
background: #fff;
}
.vertRule {
float: right;
clear: right;
width: 30px;
height: 600px;
}
.content {
display: table-cell;
word-break: break-word;
}
mark {
display: block;
pointer-events: none;
}
.break {
min-height: 80px;
}
/* End Primary Styles */
/* Begin Control */
/* https://jsfiddle.net/q4pu37dn/15 */
.textframe {
width: 350px;
height: 600px;
border: 1px solid black;
background: #fff;
}
.flowbox {
float: right;
clear: right;
width: 30px;
height: 600px;
}
.spacer {
background: yellow;
}
.pagebreak {
display: block;
min-height: 80px;
}
/* End Control */
/* Begin Demo Test */
.btn {
display: inline-block;
font: inherit;
margin: 5px 10px;
padding: 2px 5px;
border: 5px outset grey;
border-radius: 8px;
color: #000;
cursor: pointer;
}
[type='checkbox']:checked+label {
background: rgba(255, 12, 34, 0.75);
border: 5px inset grey;
color: #fff;
}
#outline1:checked+label+#outline2+label+hr+#page01>.editor>.content *,
#outline2:checked+label+hr+#page01>.textframe>#textOutline *:not(.spacer) {
color: #fff;
background: tomato;
outline: 2px solid red;
}
#outline1:checked+label+#outline2+label+hr+#page01>.editor>.content>.break,
#outline2:checked+label+hr+#page01>.textframe>#textOutline>.spacer {
background: yellow;
outline: none;
}
/* End Demo Test */
<!-- Begin Demo Test -->
<input id="outline1" type='checkbox' hidden>
<label for='outline1' class='btn'>Outline 1</label>
<input id="outline2" type='checkbox' hidden>
<label for='outline2' class='btn'>Outline 2</label>
<hr>
<!-- End Demo Test -->
<!-- Begin Optional Layout Part 1 -->
<main id='page01'>
<!-- End Optional Layout Part 1 -->
<!-- Begin Primary Markup -->
<section class="editor" contenteditable='true'>
<mark class="vertRule" contenteditable='false'></mark>
<article class='content'>
<span>
Clicking here is not a problem
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<mark class="break" contenteditable='false'></mark>
<span>
Clicking here (on empty space, not directly on text) will put the caret above the first .break element.
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<mark class="break" contenteditable='false'></mark>
<br>
<span>
Clicking here is not a problem
</span>
<br>
<br>
</article>
</section>
<!-- End Primary Markup -->
<!-- Begin Control -->
<div class="textframe" contenteditable>
<p id='textOutline'>
<span class="spacer flowbox"></span>
<span>
Clicking here is not a problem
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<span class="spacer pagebreak"></span>
<span>
Clicking here (on empty space, not directly on text) will put the caret above the first .pagebreak element.
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<span class="spacer pagebreak"></span>
<br>
<span>
Clicking here is not a problem
</span>
<br>
<br>
</p>
</div>
<!-- End Control -->
<!-- Begin Optional Layout Part 2 -->
</main>
<!-- End Optional Layout Part 2 -->
Обновление 2 (Демонстрация 2)
OP относительно демонстрации 1:
"Вы решили это для моего надуманного примера, да. К сожалению, невозможно установить эти значения для элементов в реальном приложении, поток здесь полностью выходит из строя."
См. Демонстрация 2, она работает лучше, чем Демонстрация 1. Поскольку он использует только позиционированные элементы, конфликтов в потоке нет. Чтобы адаптировать Demo 2 к своему приложению, все, что вам нужно сделать, это добавить position:relative к родительским элементам. Соответствующий стиль выглядит следующим образом:
article p {display: table;...
Необходимо было присвоить position:relative всему, что вложено в .textframe, иначе элементы static не взаимодействовали бы с позиционируемыми элементами. Существуют правила, которых придерживаются таблицы и компоненты таблиц, которые применяются не только к их содержимому, но и к тому, как они взаимодействуют с соседними элементами.
Демо 2
article p {display: table...
.container {
width: 400px;
float: left
}
.textframe {
width: 350px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
/* Needed for long words */
word-break: break-word;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
display: table;
margin: 0;
position:relative;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
.pagebreak {
display: block;
pointer-events:none;
position:relative;
}
<div class="container">
<h4>
article p {display: table; position: relative;}<br>
all children of .textframe have: position: relative;
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<mark class="pagebreak" contenteditable="false" style="min-height: 80px"></mark>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<mark class="pagebreak" contenteditable="false" style="min-height: 80px"></mark>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
<hr>
</article>
</div>
</div>
Ссылки
MDN — Плавающая
MDN — позиция
Приемы CSS — абсолютное позиционирование внутри относительного позиционирования
Приемы CSS — все о плавающих элементах
отображать: table/table-cell
word-break:break-word
person
zer00ne
schedule
17.09.2018
