cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              h1 Text-wrapping, hyphenation, emojis and what not

ul.skiplinks
	li <a href="#css">Skip to the CSS Used</a>
	li <a href="#tests">Skip to the Tests</a>
	li <a href="#questions">Skip to the Questions</a>
	li <a href="#answers">Skip to the Answers</a>
	li <a href="#acknowledgements">Skip to the Acknowledgements</a>

h2#css 💅 CSS Used

pre
	code
		| .test {
		|     width: 50vw;
		|     -webkit-hyphens: auto;
		|     -ms-hyphens: auto;
		|     hyphens: auto;
		|     padding: 0.5em;
		|     outline: 1px solid #666;
		| }

h2#tests 🎰 The Tests

h3 Long emoji strings

.testwrapper#test-emoji-pileofpoo

	h4 The 💩 emoji

	.test
		| 💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩

	p.toggleLang đŸ‡ĻđŸ‡ļ 
		a(href="#test-emoji-pileofpoo") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-emoji-pileofpoo") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Chrome 55 (macOS)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Chrome 55 (Win10)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Firefox 52.0a2 (macOS)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Firefox 50 (Win10)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt IE11 (Win10)
		dd The 💩 emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd The 💩 emoji does not get text-wrapped, nor hyphenated. The container overflows.

.testwrapper#test-emoji-warningtriangle

	h4 The ⚠ī¸ emoji

	.test
		| ⚠ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸âš ī¸

	p.toggleLang đŸ‡ĻđŸ‡ļ 
		a(href="#test-emoji-warningtriangle") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-emoji-warningtriangle") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Chrome 55 (macOS)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Chrome 55 (Win10)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Firefox 52.0a2 (macOS)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container stretches.
		dt Firefox 50 (Win10)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container stretches.
		dt IE11 (Win10)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd The ⚠ī¸ emoji does not get text-wrapped, nor hyphenated. The container overflows.

h3 Long <code>\w</code> strings

h4 Mutliple long strings

.testwrapper#test-textstrings-multiple

	.test
		| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

	p.toggleLang đŸ‡ĻđŸ‡ļ 
		a(href="#test-textstrings-multiple") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-textstrings-multiple") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd Multiple long strings get hyphenated <em>(<code>-webkit</code> vendor prefix required though)</em>.
		dt Chrome 55 (macOS)
		dd Multiple long strings get hyphenated, except for the last long string in the series. When a <code>lang</code> attribute is set, the hyphenation changes.
		dt Chrome 55 (Win10)
		dd Multiple long strings do not get hyphenated.
		dt Firefox 52.0a2 (macOS)
		dd Multiple long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt Firefox 50 (Win10)
		dd Multiple long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt IE11 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.

.testwrapper#test-textstrings-single
	
	h4 Single long string

	.test
		| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

	p.toggleLang đŸ‡ĻđŸ‡ļ 
		a(href="#test-textstrings-single") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-textstrings-single") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd Single long strings get hyphenated <em>(<code>-webkit</code> vendor prefix required though)</em>
		dt Chrome 55 (macOS)
		dd A single long string does not get hyphenated <em>(because it is the last one, cfr. multiple long strings – see above)</em>
		dt Chrome 55 (Win10)
		dd Multiple long strings do not get hyphenated.
		dt Firefox 52.0a2 (macOS)
		dd Single long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt Firefox 50 (Win10)
		dd Single long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt IE11 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.

h2#questions ⁉ī¸ Questions

p Looking at the results, this raises some questions

h3 Core questions

ol
	li Why do some emojis get text-wrapped, and some not? &rarr; <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/#question_1" target="_top">Answered!</a>
	li If the above is a feature: is there a list of emojis – or can we detect which emojis – that get text-wrapped (and those who are not) available somewhere? &rarr; <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/#question_2" target="_top">Answered!</a>
	li Why do emojis get text-wrapped, and not hyphenated? &rarr; <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/#question_3" target="_top">Answered!</a>
	
h3 Browser specific Questions

ol(start=4)
	li Why, in Chrome 55, is hyphenation not applied on the last string? &rarr; <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=676890&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=">It's a bug. Fixed in Chrome 56 and up.</a>
	li Why, in Firefox 52.0a2, does the container stretch out on the ⚠ī¸-test, whilst other browsers overflow?
	li Why, in IE11/Edge12, does the 💩-test not wrap, whilst other browsers do?
	li Why, in IE11/Edge12, does hyphenation not work <a href="http://caniuse.com/#feat=css-hyphens" target="_top">even though it should</a>? Setting the <code>lang</code> to <code>en-US</code>, or setting the <code>lang</code> on the <code>body</code> or <code>html</code> yield the same result.
	li Why, in Chrome 55 and Safari 10.0.2, is hyphenation applied even when the required <code>lang</code> is not set?
	
h2#answers ℹī¸ Answers

p Thanks to <a href="https://twitter.com/KhaledGhetas">Khaled Hosny</a> I've been able to crack this nut and answer the core questions. <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/" target="_top">Check out the answers on my blog</a>.
	
h2#acknowledgements 👏 Acknowledgements

p Thanks go out to to:
ul
	li <a href="https://twitter.com/haroenv">Haroen Viaene</a> for providing test results data on Win10.
	li <a href="https://twitter.com/KhaledGhetas">Khaled Hosny</a> for <a href="https://twitter.com/KhaledGhetas/status/812311551474536448">pointing</a> me towards the needed Line Breaking Properties Specification to solving this.
            
          
!
            
              html, body
	margin 0
	padding 0
	
*
	box-sizing border-box

html, body
	width 100vw
	height 100vh
	
body
	padding 1vw
	font-size calc(1em + 0.2vw)

ul.skiplinks
	margin 0
	padding 0
	li
		margin 0
		padding 0
		list-style-type none
		&:before
			content '→ '
	
@keyframes yellowfade {
    0% { background-color: yellow; }
    100% { background-color: transparent; }
}
	
h2
	margin-top 4vw

	&:target
		background-color yellow
		animation yellowfade 500ms ease-in-out 1000ms 1 forwards
	
.test
	width 50vw
	-webkit-hyphens auto
	-ms-hyphens auto
	hyphens auto
	padding 0.5em
	outline 1px solid #666

	margin 2em 0 1em
	position relative	

	&::before
		content 'NO LANG ATTR SET'
		position absolute
		top 0
		left -1px
		background dimgray
		color #fff
		font-size 0.8em
		line-height 0.8em
		padding 0.4em 0.6em
		font-family Consolas, Courier New, monospace
		transform translate3d(0,-100%,0)
		opacity 0.4
		
	&[lang="en"]::before
		content 'lang="en"'
		background darkgreen
		opacity 1
	
.setLanguage:before
	content '👉 '
	
dl.results
	width calc(50vw - 0.5em)
	display flex
	flex-direction row
	flex-wrap wrap
	align-items baseline
	margin 1em 0 1em 1.5em
	
	display none
	
	&--visible
		display flex
	
	dt
		flex 0 1 12.5vw
		font-style italic
		margin 0
		padding 0.5em 0 0 0
		
	dd
		flex 0 1 calc(37.5vw - 0.5em)
		margin 0
		padding 0.5em 0 0 0.5em
		
		&:before
			content '→ '
            
          
!
            
              document.addEventListener('DOMContentLoaded', (e) => {

	Array.from(document.querySelectorAll('.toggleLang a')).forEach(($el) => {
			$el.addEventListener('click', (e) => {
				e.preventDefault();
				const target = document.querySelector(`${e.currentTarget.getAttribute('href')} .test`);
				if (target.getAttribute('lang')) {
					target.removeAttribute('lang');
				} else {
					target.setAttribute('lang', 'en');
				}
			});
	});

	Array.from(document.querySelectorAll('.showResults a')).forEach(($el) => {
			$el.addEventListener('click', (e) => {
				e.preventDefault();
				const target = document.querySelector(`${e.currentTarget.getAttribute('href')} .results`);
				target.classList.toggle('results--visible');
			});
	});

});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console