强制内联块中的两行

Question

我需要在其他文本中间插入一个内联块。

块中的文本应始终分成两行（只有一个单词时除外）。

内联块的内容未知。 宽度应根据内容而变化。

例子：

我的代码：

div.main {
	font-size: 30px;
	padding: 30px;
	width: 630px;
}

div.two-lines {
	display: inline-block;
    font-size: 40%;
    height: 27px;
    background: #35b1e6;
    padding: 10px;
    color: #6df0ff;
    vertical-align: middle;
}

/* This needs to go */
div.two-lines:first-of-type {
	width: 194px;
}

div.two-lines:nth-of-type(2) {
	width: 39px;
}

<div class="main">
	In the middle of a paragraph
	<div class="two-lines">INLINE-BLOCK, WHICH CONTAINS TWO EQUALLY LONG LINES.</div>, 
	with text preceding and following it.
	
	Some more text, and here comes a
	<div class="two-lines">SHORT ONE</div>!
	You see? Two lines!
</div>

Answer 1

一种 hacky 方法是复制文本（使用 data 属性）然后你总是强制主文本为一行，因此它将定义主宽度然后使用复制的文本仅占用 50该宽度的 %，您将有 2 条宽度几乎相同的线：

div.two-lines {
  display: inline-block;
  padding: 10px;
  margin:5px 0;
  color: #6df0ff;
  position:relative;
  height:40px;
}

div.two-lines::before {
  content: attr(data-text);
  opacity:0;
}
div.two-lines::after {
  content: attr(data-text);
  position:absolute;
  padding:10px;
  top:0;
  left:0;
  width:55%; /*a litte bigger than 50% to avoid 3 lines */
  background: #35b1e6;
}

<div class="two-lines" data-text="INLINE-BLOCK, WHICH CONTAINS TWO EQUALLY LONG LINES."></div>
<div class="two-lines" data-text="some more text here"></div>
<div class="two-lines" data-text="a very long long long long long long long long long long long long long long long long  text here"></div>
<div class="two-lines" data-text="SHORT ONE"></div>
<div class="two-lines" data-text="one"></div>

此方法的唯一缺点是由于全宽文本，您将在右侧有额外的空间。我们只需要找到一种方法来摆脱它，以便能够将它包含在文本中。

另一种有趣的方式（仍然是 hacky）是依靠 CSS 网格，您不需要复制文本。您必须将文本的宽度设置为 50%。诀窍是这个宽度将基于由文本内容定义的轨道宽度（是的有点复杂）

div.two-lines {
  display: inline-grid;
  margin:5px 0;
  color: #6df0ff;
  position:relative;
}

div.two-lines::before {
  content: attr(data-text);
  background: #35b1e6;
  padding:10px;
  width:55%;
}

<div class="two-lines" data-text="INLINE-BLOCK, WHICH CONTAINS TWO EQUALLY LONG LINES."></div>
<div class="two-lines" data-text="some more text here"></div>
<div class="two-lines" data-text="a very long long long long long long long long long long long long long long long long  text here"></div>
<div class="two-lines" data-text="SHORT ONE"></div>
<div class="two-lines" data-text="one"></div>