Is there any way to remove italic effect tag using CSS?

Question

How do I remove italic effect of <i> tag so I can do this:

<span>
    test<i>test</i>
</span>

I am filling some text in the <i> tag using jQuery innerHtml, so it comes in italic, but I don't want the italic effect.

Is there any way I can remove the italic effect using CSS?

I cant use a different tag. I can only use the <i> tag.

Answer 1

You just need to use this CSS code:

.no-italics {
    font-style: normal;   
}

HTML code:

<span>
   test
   <i class='no-italics'>test</i>
</span>

Answer 2

Use font-style:

i {
  font-style: normal;
}

Answer 3

You can do any formatting with CSS.

Like:

b {
    font-weight: normal;
}

will change bold text to normal.

Similarly,

i {
    font-style: normal;
}

will make <i> font style as normal (non-italic).

Answer 4

You can use the CSS style font-style: normal to get that effect. Then you can do your jQuery to put text in the tag:

$('i#replace').html('this text isn\'t italicized either . . . ');

i {
  font-style: normal;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span>text text <i id="replace">this is NOT italic</i> text text</span>

Answer 5

Use font-style to reset the italic style when the class is used.

i.no-italics {
    font-style: normal;   
}

<i class="no-italics">Olmstead v. L.C. and E.W</i>