Unicode混淆字符文本出现多余空白的原因及消除方法

我有两段含混淆字符（confusables）的Unicode文本，第一段显示时存在多余换行/空白，排版极差，第二段则显示正常。我试过所有CSS white-space 属性都无法消除这些空白，但把文本粘贴到记事本后，多余空白会自动消失。想知道两段文本表现不同的原因，以及如何消除这些空白？

代码示例 #

CSS #

div {
 background-color:#f5f5f5;
 white-space:pre-line;
}

HTML #

Extra lines/space:
<div>“𝜝𝖊𝑐ąꞟ𝒔ë w𝔥ɩ𝘐ȇ ŧ𝚑ẹ Էꭈŭℼ𝚌ḣȇ𝗈ṉ mаʏ 𝖻𝖊 𝗎šё𝒹 𝗶𝓃 ￨ῑẽŭ ᴑ𝒻 𝘤ờἦ𝘃é𝘳𝘴ӓẗιơᾒꓹ wⲟɽԁṣ w𝘪∥ 𝓪𝚕w𝕒ỹѕ 𝓇𝑒𝐭ằỉῃ 𝚝𝙝𝖊⍳ᴦ 𝖕ồw𝖊𝒓‎܂‎ Ẃōɼᑯ𝔰 ὸẝḟ𝖾ⲅ 𝐭𝖍𝐞 m𝔢ăń𝘀 𝗍ổ mèâ𝜋⍳𝓃ĝ¸ åᾕ𝕕 𝗳ờӷ 𝘵һ၀ŝѐ w𝕙σ w⍳∥ 𝟣ῒŝ𝞽ê𝓃¸ ţ𝔥é ẹήȗǹƈἳấȶῐ𝕠𝔫 ớϝ 𝒕ȑǚṭĥ․ Ᾱῇ𝔡 ṫ𝓱𝖊 ẗ𝔯ủ𝓽ɦ ῒṩ‚ 𝓽һ𝖊ӷ𝔢 ỉ𝔰 𝐬ỏmḝŧ𝚑ỉῇ𝒈 ṱҽ𝑟ṛїƀꓲ𝛾 wṝ੦ṅ𝙜 wį𝘁𝘩 ţℎῑ𝘀 𝖼ợüἤ𝝉𝒓𝝲‎٫‎ ɩ𝕤𝕟‎י‎𝖙 ť𝙝𝑒𝒓𝘦ʔ Ϲ𝓻μҽ⎩τӱ ɑἠ𝙙 іṇ𝑗μ𝗌ț⍳ϛ℮ꓹ 𝚒ῇ𝚝ȱℓȅ𝘳𝓪ň𝖈ē ӑᾐ𝑑 ۵𝔭𝝆𝗿𝕖ʂṡḭօὴ꘎ ₳𝓷ḋ w𝗵𝘦𝗋ė ò𝛑ⲥẹ ｙ𝚘ɥ ḣα𝗱 ȶ𝒽ê 𝐟ř𝓮ě𝙙ὅm 𝘁ό ၀𝐛𝓳𝚎ċ𝖙‎؍‎ 𝔱ὄ 𝙩һ𝜾ᾓḳ ảῆ𝓭 șṗⅇà𝓀 ąṣ ӯô𝓾 şậw 𝖋𝚒ƫ‎٫‎ 𝑦𝞂ṳ ἤǫw 𝓱ẵὺḙ 𐐽ẽṉ𝗌𝚘𝑟𝐬 ḁῂ𝓭 ŝ𝘆ṥ𝑡𝓮m𝘴 ὂꞙ ƽǔṛὺéἰ‎װ‎ǻ𝚗𝗰𝗲 𝖼ǒⅇӷ𝕔ıἧ𝓰 ӱ𝘰ử𝔯 ҫ𝞼𝛑քᴑ𝐫mі𝛕ყ ằǹᏧ ŝ𝛔￨𝒊ϲḭեїᾑ𝓰 𝔂ὃü𝗿 şվᏏmιş𝙨ι𝞸ṇ꘎ Ḧ𝓸w ꓒıⅾ τ𝙝íƽ 𝚑𝒂𝚙𝜚ḙᴨʔ Ẅ𝓱ṏʻṣ ṯọ ɓⅼӓmĕʔ Ꮃê‖ 𝙘ⅇȓτӑϊ𝝿𝑙𝖞 𝓽հē𝚛𝚎 à𝘳ḙ 𝘁𝗵𝓸𐑈ḕ m๐ȓḝ ꭇ𝖊ṡῥ𝝈ռșıϸ𝓵ȅ 𝓉һ𝗮ή όէһⅇᴦ𝙨¸ 𝛂ῆḑ 𝔱𝗁𝐞ỳ wἰ‎װ‎ ƃⅇ ɦẹⅠԁ ả𝓬čốû𝜋ţẫ𝚋ꓲē‎٫‎ ḃꭎ𝓉 ӓ𝙜𝓪įℼ 𝚝𝓇𝒖ṭḩ Ƅ𝔢 Ƚ๐𝘐ḋ‚ ɨ𝒻 ẙόứᛌᴦȅ ɬở𝙤ƙῖ𝙣𝐠 𝙛ꬽ𝗋 𝓽һḝ 𝗀ửῐ𝑰ţ𝐲¸ 𝘺𝛔𝗎 𝕟ẽḛ𝙙 ὄ𝛑𝙸ỷ Ｉ𝞼ỡк ıń𝐭ö 𝒂 m𝘪ꭈ𝓻𝖔ɼ‎܁‎ I 𝜅поw w𝔥ў 𝛾𝗈ŭ Ꮷìḍ 𝗂ţ꘎ I ǩἢ۵w ÿǭ𝞄 w𝖊ṝě ȧſŕǎɨɗ‎܁‎ Ẇһὸ wǫửΙḍπ`𝒕 𝚋ⅇॽ Ꮤ𝜶𝓻‚ 𝑡ḙṛ𝒓ôѓ‎؍‎ ɗἰ𝘴℮𝒂𝚜ȩ‎٠‎ 𝝩𝗁ë𝕣𝘦 wḗṝḛ 𝐚 m𝘆ɼӏ𝕒ᑯ ｏẝ 𝖕ꭈọ𝚋ɫęm𝔰 wḥⅈ𐐽𝒉 č౦ηꜱ𝜚𝛊řе𝚍 ṯ௦ čȯꭈꭈ𝐮𝓹ŧ 𝛾𝒐𝚞𝙧 𝔯𝗲𝕒ṥဝ𝐧 àᾔḍ ꭈ𝝈𝐛 𝞬ᴏ𝖚 𝛔𝑓 𝛾όůӷ ƈоmm𝔬ῆ 𝑠ѐňѕ𝔢۰ ”
― Ⱥℓ𝛼ñ Ꮇ𝒐𝐨ӷ𝙚‎؍‎ 𝚅 ẝó𝓻 𝑉𝒆ňԁȇ𝓉ṯ𝒂</div>

<br/>

And then this one is good:
<div>“Ｂȩϲạữ𝗌ẻ w𝚑î𝝞ҽ 𝓉һ𝓮 𝜏𝚛ᴜπϲẖ𝗲𝙤ἠ m𝖆𝐲 Ƅ𝙚 նšӗď ïṇ 𝟷ῑ𝙚𝓊 ȯ𝔣 ⲥṑπῧꬲ𝗿ʂ⍺𝜏ῖօᾕꓹ wǒӷ𝙙𝕤 wἳ‖ ẳ𝐥w𝘢𝙮ṩ гёƫảïň 𝘁ĥèіⲅ 𝒑𝞂wē𝔯ꓸ 𝓦ổ𝔯ԁ𝚜 ὄ𝙛𝗳èг 𝛕𝔥ȇ mḝẚἠṥ 𝖙𝐨 měặ𝗇ΐʼnց¸ ӑ𝕟ⅆ ẝо𝓇 𝓽𝓱όṧḛ w𝗵𝒐 wîǁ ۱ɨѕեẹή‚ ŧḧḗ ⅇñủñϲ𝙞а𝓽íơṇ 𝝄𝑓 էɽ𝙪𝞽𝔥ꓸ ꓮἣ𝘥 𝙩ẖẽ 𝞽ṝṵ𝔱ḣ ɪš¸ 𝝉ȟéґѐ ỉṥ 𝓼𝝄mē𝐭իȋἡ𝔤 ṭḙꭇ𝐫ɪ𝘣ļ𝒚 wṝṍήɠ w𝗂ṫℎ ƫḧ𝗶𝓈 ᴄờ𝘶𝓃𝞽ȓყ‎؍‎ 𝕚𝕤𝜋ᑊ𝝉 ţḫẻг𝕖Ɂ 𝖢ꭇựẹ1ț𝛾 ḁἡ𝓭 ἱἤĵừŝ𝞃ỉ𝓬ȅ‎٫‎ ΐἥṭṑ1𝙚ꭇǡ𝝅𝒄ḗ ǡʼn𝒅 ό𝜌𝝔ѓ℮𝒔𝗌𝘪òἣ‎܁‎ Ạ𝖓𝕕 wի𝕖ṛℯ ೦𝗻𝗰𝗲 𝔶ỗữ ɦа𝙙 ţ𝓱ⅇ ꬵɼė𝚎ᑯṑm 𝜏ὄ ộɓյḙ𝚌𝐭¸ Ƚо ƫիἰὴҝ 𝛂𝜋𝒅 𝖘ρ𝐞ậ𝔨 𝞪𐑈 ỿō𝝊 𝙨ẩw ẛї𝐭‎٫‎ ÿơ𝕦 π𝞸w ḣ𝞪ὒẻ ƈḝὴѕὃґ𝗌 ẵὴ𝕕 𝒔ỵ𝓈ṯȇm𝓈 ｏ𝙛 ṡվ𝙧ｖ𝘦𝒾Ⅱą𝛑𝖈ӗ ϛỏẻⲅⅽḭᴨɡ γὂûӷ 𝖼ởἡ𝗳ὀṛmί𝐭𝘆 ậᾔ𝖉 şõɫἰ𝓬𝐢ṯὶᾖĝ 𝐲ōũꭇ ѕŭ𝒃mὶƽṩ𝔦ớṅ‎٠‎ Ң௦w 𝓭īḓ т𝙝𝜄𐑈 ȟẩṗ𝖕𝔢ǹॽ 𝗪𝒉𝜊‎׳‎ṧ ţǭ Ꮟ𝙡ẫmҽʔ 𝑊℮‎װ‎ çḕȓ𝚝𝜶įǹƖ𝞬 𝐭ẖꬲ𝔯𝔢 ã𝚛𝒆 𝕥𝓱ỗ𝖘ȩ mᴑ𝗿ẹ 𝙧𝚎𝐬𝐩ṓňꜱɨ𝒃ⅼ𝑒 ṭɦấ𝛑 ơ𝓉𝔥ѐґ𐑈‚ ȁὴ𝙙 𝒕𝙝ěӳ wῒⅡ ƃḙ հḕІḋ ầ𝓬ςȍυήŧẳḃ𝟣𝘦‚ ƅ𝛖ț 𝐚𝘨ẳᎥᾑ 𝗍ꭇ𝔲𝕥𝗵 𝖻ḕ ᴛȭ𐊊ᑯ‎؍‎ ⍳𝒻 𝛄օṹ´𝐫𝘦 ⅼȍộ𝞌і𝗻𝓰 ꞙ𝝄ṙ 𝕥𝒽ę 𝘨û𝜾𝑙ȶ𝙮ꓹ 𝙮ꬽ𝓾 𝒏éḙ𝖉 ṏ𝓷𝐥ỷ 𝕝۵𝝈𝜘 ῒ𝙣𝘁ȫ 𝓪 m𝜾𝗿ȓô𝚛‎𐩐‎ I 𝖐𝜋ὃw w𝔥у ƴ०ꭎ 𝑑ḭ𝙙 𝚒𝘁ꓸ I ĸǹ۵w ỹὃṹ wèɼ𝔢 ẵ𝓯ɼắ𝒾ᑯ‎܁‎ 𝔚𝖍ỡ wὂụⅼ𝗱ᾕʽե 𝙗ḕᎮ 𝘞ãг¸ 𝐭ꬲ𝕣ꭈṍ𝚛ꓹ 𝔡¡𝐬ėậşȅ‎܂‎ Ṯḣȅꭈȇ wěⲅℯ å m𝝲ř𝗂ǟ𝒅 ὃ𝚏 ⲣɽ𝞸𝔟ḽêm𝐬 wḥ𝔦ⲥ𝘩 𝐜ӧᾕ𝔰𝜌𝜾ѓȇ𝔡 тό ᴄ𝝈𝔯ṙ𝘂𝞺𝝉 уǒữȓ ⲅℯ𝖆șծ𝘯 𝙖ᾕď ґὀ𝖻 𝑦๐ủ ꬽ𝚏 ỿốūꭈ čòmmơ𝛑 ś𝑒ῆƽë‎𐩐‎ ”
― Ǎĺáռ 𝚳όℴⲅё‎٫‎ ꓦ ẝὃ𝓻 𝗩℮ńԁë𝒕ƫ𝝰</div>

问题原因 #

第一段文本里夹杂了Unicode隐藏控制字符，比如U+00AD（软连字符）、U+200B（零宽空格）、U+061C（阿拉伯字母标记）这类字符。这些字符在记事本中不会被渲染为空白，但浏览器会按照排版规则将它们解析为换行或空白，导致显示异常。第二段文本没有这类隐藏控制字符，所以显示正常。

解决方法 #

1. 预处理文本，移除控制字符 #

用正则表达式过滤掉所有Unicode控制字符（保留正常空格和换行）：

// 清理文本中的Unicode控制字符
const cleanedText = dirtyText.replace(/[\x00-\x1F\x7F-\x9F\u200B-\u200F\uFEFF]/g, '');

2. CSS强制抑制控制字符的排版影响 #

如果无法修改文本内容，可以添加CSS属性减少控制字符的影响：

div {
  background-color:#f5f5f5;
  white-space: pre-line;
  /* 禁止软连字符触发换行 */
  hyphens: none;
  /* 强制文本连续换行，忽略零宽字符的分隔效果 */
  word-break: break-all;
}

注意：这种方法对部分特殊控制字符可能无效，最彻底的方案还是预处理文本移除控制字符。

内容的提问来源于stack exchange，提问作者Scott Weaver