Jquery repalce hyphens

Hello Experts,

Lets take the string "Word-ing", see below,
On large screen the tag <i> is in display block. So the "ing" comes right below the "Word".
On a small screen tag <i> is in display inline and so I need to remove the hyphen right next to the "Word-".

Here is a script i came up with and now my question is how to bring back the hyphen when resize to large screen. The issue is also that my code removes the tag "i" totally, not sure why.

<span class="hyphen">Word- 

Open in new window

$(window).bind('load resize',function() {
		if ($(document).width() <= 1023) {
			var hyphen = $(".hyphen");
			hyphen.each(function() {
		} else {

Open in new window

Who is Participating?
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
You could put the hyphen in a span by itself and display that span only in your small screen responsive styling.
<span class="hyphen">Word<span class="largescreen">-</span>

Open in new window

/* Default CSS */
span.largescreen { display: none; }

@media screen and ([small screen parameters here]) {
span.largescreen { display: inline; }

Open in new window

RefaelAuthor Commented:
Hello Kim, you are so right! What was I thinking trying to resolve this with jQuery. Thank you!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.