如何使用 CSS + HTML 从对话行中排除前导连字符？

Question

我在我的博客中写小说故事，文本是水平对齐的（与印刷书籍一样）。然而，这会对对话台词产生负面影响，因为前导连字符和后续单词之间的距离也会被调整。最终，对于不同的对话行，第一个词没有对齐。是否可以使用一些 CSS + HTML 技巧来解决这个问题？是否可以在 Google Docs 或 Libre Office Writer 中实现类似的功能？谢谢。

示例屏幕截图（请忽略实际措辞 - 这只是为了说明情况）。如您所见，第一个单词（在这两种情况下都是'Good'）不是左对齐的（我不关心其余的单词）。

事实上，我想将前导连字符、后跟一个 space 和一个单词视为一个单词。我尝试做类似的事情：

dstart::before { content: "14[=12=]a0"; }</style><br/>
<span class="dstart">Good</span>

但我的浏览器 (Firefox) 仍然可以识别 space 字符并执行类似的对齐。我想，如果其中一个不接受我的方法，则无需检查其他主要浏览器。

以下解决了问题：

<span style="padding-right: 0.5em;">-</span>Good...

但是，在执行 copy/paste 时，计划文本中的连字符和 'Good' 之间将没有 space，因此，仍然 不可接受 对我来说。

Answer 1

一种解决方案可能是使用无序列表 [1] 来标记您的对话，其中每个列表项都有一个 破折号 作为自定义项目符号。

看这个例子：

ul {
text-align: left;
list-style: none;
}

li {
margin-bottom: 20px;
}

li::before {
content: '14 [=10=]a0 [=10=]a0 [=10=]a0';
}

<ul>
<li>Good morning, Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-Ian-Jake-Keith-Lachlan.</li>
<li>Good morning, Mr. Pickwick.</li>
</ul>

[1] 我知道 <ul> 和 <li> 不是最明显的标记文学对话的项目，但由于 HTML5 <dialog> 元素已改变其最初用途（参见：http://html5doctor.com/a-little-more-conversation-with-dialog/) and is now in an experimental state (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog），目前没有用于标记对话的特定元素。

======

选项 2

另一种解决方案，如果您在执行 copy/paste 时需要在纯文本中保留连字符，可能是以下示例，其中脚本自动插入 em dash 在每个 <li> 的开头，页面加载后：

var dialogue = document.getElementsByClassName('dialogue')[0];
var exchanges = dialogue.getElementsByTagName('li');

for (var i = 0; i < exchanges.length; i++) {
exchanges[i].innerHTML = '&#8212; &nbsp; &nbsp;' + exchanges[i].innerHTML;
}

ul {
text-align: left;
list-style: none;
}

<ul class="dialogue">
<li>Good morning, Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-Ian-Jake-Keith-Lachlan.</li>
<li>Good morning, Mr. Pickwick.</li>
</ul>

Answer 2

您可以将其浮动以使其不流动：

.quote::before {
  content: "14[=10=]a0";
  float: left;
}

.quote::before {
  content: "14[=11=]a0";
  float: left;
}
.quote { text-align: justify; }
.quote::after { content: ""; width: 100%; display: inline-block; }

<div class="quote">Good morning Alex-Ben-Charlie</div>

但是，破折号似乎是内容的一部分，因此最好将它包含在真实元素中而不是伪元素中。

.dash {
  float: left;
}
.quote { text-align: justify; }
.quote::after { content: ""; width: 100%; display: inline-block; }

<div class="quote">
  <span class="dash">—&nbsp;</span>Good morning Alex-Ben-Charlie
</div>

Answer 3

最后，我自己找到了解决办法。抱歉 Rounin 和 Oriol 占用了你们这么多时间，非常感谢你们真诚地帮助我。正如我提到的，我需要前导连字符 space 和第一个单词被视为一个单词。因此，不需要任何样式或特殊列表，只需使用 – 或类似的：

<!DOCTYPE HTML>
<html>

<head>
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 <meta content="utf-8" http-equiv="encoding">

 <style>
     p { margin-top: 0; margin-bottom: 0; text-align: justify; }
 </style>
</head>

<body>
 <p>–&ensp;Good morning, Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-Ian-Jake-Keith-Lachlan.</p>
 <p>–&ensp;Good morning, Alex-Ben-Charlie-David-Eugene-Frederick, George-Harry-Ian-Jake-Keith-Lachlan-Mark.</p>
 <p>–&ensp;Good morning, Mr. Pickwick.</p>
</body>
</html>

在这种情况下，页面上的文本会按预期显示，copy/paste 也会按预期显示。我正在使用段落包装器

，因为在 WordPress 中，当我这样写时它会被隐式注入：

– 早上好，Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-

– 早上好，Alex-Ben-Charlie-David-Eugene-Frederick，George-Harry-Ian-Jake-Keith-Lachlan-Mark。

– 早上好，匹克威克先生。

并且当我 copy/paste 显示页面中的纯文本时，每个块都用空行分隔。是的，我希望它是那样的，因为对于纯文本来说，阅读起来会更容易。

如何使用 CSS + HTML 从对话行中排除前导连字符？

How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

css

justify

hyphen

dialog

======