2

I have a word that I have put a ­ inside. It hyphens alright until I get to a small enough screen size then it adds an extra hyphen at the end.

Edit: Can't reproduce it in jsfiddle, because it seems to interpret the html differently. I can show a picture of the problem however

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

Becomes

enter image description here

With an extra hyphen at the end

I saw this and didn't really like the answer, Extra hyphen at end of word if &shy; is used in middle of the word and the parent div is narrow. "just make the div wider".

Are there any ways to make it not add extra hyphens I didn't ask for instead?

Writing

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



<style>
.something{
 width:85px
}
<\style>

On http://htmledit.squarefree.com/

Causes a similar issue but not quite. I can only seem to replicate with Chrome

Community
  • 1
  • 1
Hafax
  • 369
  • 2
  • 14
  • Please reproduce the problem at jsfiddle, it will be easier to help you, Cheers – Ram Segev Aug 01 '16 at 15:12
  • Can't reproduce the issue in js fiddle but I've added a picture to better explain what my problem is. – Hafax Aug 02 '16 at 07:01
  • That sounds much like a browser bug, not something you can do anything about. What browser (version) are you using, does it happen with others as well? – Bergi Aug 02 '16 at 07:08
  • Chrome 51.0.2704.103 and it's only an issue I've seen in chrome – Hafax Aug 02 '16 at 07:14
  • I was able to reproduce it in chrome on a fiddle with a screen size of 530px, the hypens appears like the image you've posted. – LS_ Aug 02 '16 at 07:17
  • Could you post a link to where you replicated it? That would be cool :) – Hafax Aug 02 '16 at 07:27

1 Answers1

2

Can you use flex?

Codepen

HTML

It seems to work in chrome for me if I add display: inline-flex;

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

CSS

.something{
 width:60px;
 display: inline-flex;
}
NooBskie
  • 3,761
  • 31
  • 51
  • Ohh it seems to have broken it on Safari though :-/ – Hafax Aug 02 '16 at 09:35
  • I guess there's no fix that works for everything because setting display: inline-flex; didn't seem to fix it on Safari (I hadn't noticed it wasn't working on Safari), and it broke something else for me. – Hafax Aug 02 '16 at 09:55