如何去掉词尾多余的连字符

Posted 2023-02-24

【中文标题】如何去掉词尾多余的连字符

【英文标题】：­ How to get rid of the extra hyphen at the end of word

【发布时间】：2016-08-01 15:05:03

【问题描述】：

我有一个词，我在里面放了一个­。它可以连字符，直到我达到足够小的屏幕尺寸，然后在末尾添加一个额外的连字符。

编辑：无法在 jsfiddle 中重现它，因为它似乎对 html 的解释不同。但是我可以显示问题的图片

<h3>
Flu&shy;ffyluffy Some&shy;something</h3>

变成

结尾多了一个连字符

我看到这个并不太喜欢这个答案，Extra hyphen at end of word if ­ is used in middle of the word and the parent div is narrow。 “只是让 div 更宽”。

有什么方法可以让它不添加我没有要求的额外连字符吗？

写作

<h3 class="something">Something Something&shy;Something</h3>



<style>
.something
 width:85px

<\style>

开启http://htmledit.squarefree.com/

导致类似的问题，但不完全是。我似乎只能用 Chrome 进行复制

【问题讨论】：

请在 jsfiddle 重现问题，帮到你会更容易，干杯

无法在 js fiddle 中重现该问题，但我添加了一张图片以更好地解释我的问题。

这听起来很像浏览器错误，不是您可以做任何事情的。您使用的是什么浏览器（版本），其他浏览器也会出现这种情况吗？

Chrome 51.0.2704.103 这只是我在 chrome 中看到的一个问题

我能够在屏幕尺寸为 530 像素的小提琴上用 chrome 复制它，连字符看起来就像你发布的图像。

【参考方案1】：

你可以使用 flex 吗？

Codepen

HTML

如果我添加display: inline-flex;，它似乎可以在 Chrome 中工作

<h3 class="something">
  Flu&shy;ffyluffy Some&shy;something
</h3>

CSS

.something
 width:60px;
 display: inline-flex;

【讨论】：

哦，它似乎已经在 Safari 上破坏了它：-/

我想没有什么方法可以解决所有问题，因为设置 display: inline-flex;似乎没有在 Safari 上修复它（我没有注意到它在 Safari 上不起作用），它对我来说破坏了其他东西。