Я не смог найти лучшего заголовка темы, в котором не было добавлено множество предостережений, чтобы отличить guish этот вопрос от похожих тем, и я посмотрел ответы на похожие темы. и они, кажется, не соответствуют тому, что я ищу - возможно, это признак того, что я слишком много спрашиваю из CSS, и в настоящее время это невозможно без специального решения!
Я поставил Я приложил максимум усилий, чтобы объяснить свой запрос, но я сделал это с помощью HTML макета (и последующих скриншотов указанного макета), прикрепленного к этому сообщению, поэтому я надеюсь, что вы простите меня за то, что я его не написал все в этом посте как обычный текст. Грязный HTML ниже может быть скопирован и вставлен в текстовый редактор и запущен как веб-страница, или посмотрите скриншот для подробностей.
Что я попрошу, после того, как вы увидите прикрепленную информацию, это : возможны ли эти функции (полностью или частично) в CSS? У меня есть сценарий использования, например "3 -".
<!doctype html>
<html>
<head>
<style type="text/css">
#box {margin-left:50px;width:1000px;border: 1px solid black;}
[id*="row"] {min-height: 50px;box-sizing: border-box; display: flex;}
.col1 {background-color:#01F33E;}
.col2 {background-color:#62A9FF;}
body {
color: black;
font-family: calibri;
}
[id*="row"] > div {float: left; font-size: 35px;}
#row1 .col1 {width: 70%}
#row1 .col2 {width: 30%}
#row2 .col1 {width: 60%}
#row2 .col2 {width: 40%}
#row3 .col1 {width: 50%}
#row3 .col2 {width: 50%}
#row4 .col1 {width: 40%}
#row4 .col2 {width: 60%}
#row5 .col1 {width: 30%}
#row5 .col2 {width: 70%}
.box3 [class*="col"] {text-align: right;}
.box4 [id*="row"]:nth-of-type(odd) .col1 {width: 52% !important;}
.box4 [id*="row"]:nth-of-type(odd) .col2 {width: 48% !important;}
.box4 [id*="row"]:nth-of-type(even) .col1 {width: 48% !important;}
.box4 [id*="row"]:nth-of-type(even) .col2 {width: 52% !important;}
</style>
</head>
<body>
<h3>Feature: merge two or more paragraphs into one, maintaining each paragraph's content and integrity, allowing control of each paragraph's styling (word wrapping, text alignment, padding, margins etc) - 'paragraph striping'.</h3>
<h4>1 -
<ul>
<li>Default word-wrap: shortest paragraph (blue) should mirror the word-wrapping of the longest paragraph (green) as much as its content can.</li>
</ul>
</h4>
<div id="box">
<div id="row1">
<div class="col1">...............................................................................</div>
<div class="col2">..................................</div>
</div>
<div id="row2">
<div class="col1">....................................................................</div>
<div class="col2">.............................................</div>
</div>
<div id="row3">
<div class="col1">........................................................................................</div>
<div class="col2">........................................................</div>
</div>
<div id="row4">
<div class="col1">........................................................................................</div>
<div class="col2">................................................</div>
</div>
<div id="row5">
<div class="col1">........................................................................................</div>
<div class="col2"></div>
</div>
</div>
<h4>2 -
<ul>
<li>Option to control the number of lines that a paragraph wraps.
<ul>
<li>Min/max words per row = 3</li>
</ul>
</li>
</ul>
</h4>
<div id="box">
<div id="row1">
<div class="col1">...............................................................................</div>
<div class="col2">This paragraph has</div>
</div>
<div id="row2">
<div class="col1">....................................................................</div>
<div class="col2">three words per</div>
</div>
<div id="row3">
<div class="col1">........................................................................................</div>
<div class="col2">row, last row:</div>
</div>
<div id="row4">
<div class="col1">........................................................................................</div>
<div class="col2">remaining words.</div>
</div>
<div id="row5">
<div
class="col1">........................................................................................</div>
<div class="col2"></div>
</div>
</div>
<h4>3 -
<ul>
<li>Option to control text alignment of each paragraph.</li>
</ul>
</h4>
<div id="box" class="box3">
<div id="row1">
<div class="col1">Some words here to fill space, Some words here</div>
<div class="col2">This paragraph has</div>
</div>
<div id="row2">
<div class="col1">to fill space, Some words here to fill</div>
<div class="col2">three words per</div>
</div>
<div id="row3">
<div class="col1">space, Some words here to fill</div>
<div class="col2">row, last row:</div>
</div>
<div id="row4">
<div class="col1"> space. Some words here to</div>
<div class="col2">remaining words.</div>
</div>
<div id="row5">
<div class="col1">fill space, Some</div>
<div class="col2"></div>
</div>
</div>
<h4>4 -
<ul>
<li>Option to specify paragraph widths and alternating ingress between the paragraphs.</li>
<ul>
<li>All paragraphs within the merged paragraph to have a default width of 50%.</li>
<li>Actual size of each paragraph based on parent's width.</li>
<li>All paragraphs within the merged paragraph to have an alternating ingress of x%.
<ul>
<li>Example: if paragraph widths = 50% and ingress = 10%, a row in a paragraph takes up 60% of the width to the other's 40%, alternating:
<ul>
<li>(used smaller ratio to make this example look decent)</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</h4>
<div id="box" class="box4">
<div id="row1">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row2">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row3">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row4">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row5">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
<h4>5 -
<ul>
<li>Option to specify 'tailing off'/'tail off' of a paragraph.</li>
<li>All the examples barring (4) show that paragraph 1 has been 'tailing off' (width of each row reduced to allow more space for text in row of paragraph 2).</li>
<li>One of the values for the 'ingress' option could be tail-off(@paragraphIndex, @paragraphSide, @tailoffName)
<ul>
<li>@paragraphIndex is zero-based index specifying the paragraph to apply the tail-off to</li>
<li>@paragraphSide is left or right (can only be right for index 0, left & right for middle indexes, only left for last index)</li>
<li>@tailoffName is the name of the tail off</li>
</ul>
</li>
<li>So the below would be something like: @paragraphIndex: 1, @paragraphSide: left, @tailoffName: staircase</li>
</ul>
</h4>
<div id="box">
<div id="row1">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row2">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row3">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row4">
<div class="col1"></div>
<div class="col2"></div>
</div>
<div id="row5">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
<h4>
<ul>
<li>In retrospect, perhaps instead of (4)'s 'ingress', it could instead be @tailoffName: jigsaw</li>
</ul>
</h4>
</body>
</html>
РЕДАКТИРОВАТЬ 05/04/20 16: 25
Я собрал воедино различные подходы, которые просто о разбирает меня в моем случае использования, но это ни в коем случае не эффективно и не идеально.
Вкратце: использование комбинации определения а) количества строк текста и б) ширины текста в абзаце 1 , это позволяет мне начинать текст параграфа 2 с конца последнего слова в параграфе 1, а затем выводить sh параграф 2 вниз, чтобы он начинался с последней строки параграфа 1.
Кредит решение Domi плюс другие по различным темам, в которых я участвовал.
Проблема с этим подходом состоит в том, что если параграф 1 имеет несколько линий, это накапливает различное количество пробелов в конце каждой строки, которые getTextWidth не учитывает. Так, например, у вас есть несколько строк, и допустим, что накопленное пустое пространство составляет 15 пикселей, параграф 2 будет иметь дефект текста с отступом 15 пикселей, в результате чего он будет перекрываться в конце пункта 1. До сих пор я не смог найти способ вычислить ширину конечного пробела в каждой строке переносимого текста (и если я это сделаю, это нужно будет рассчитать только для каждой строки, которая заполняет все возможные места в этой строке) .
Код для этого подхода: