Change the tab size on an element with word-wrap: pre?

Question

I have an element that is similar to a tag (because it has word-wrap: pre;) to display code on a website. The only problem is that the tab size is too large and causes the element to horizontally scroll often because it is of fixed width.

Is it possible to change the tab size?

Answer 1

You could replace tabs with spaces. Then you could control exactly the size of the indents.

Answer 2

We need some more clarity into your question, but are you perchance looking for the text-indent css property? You can set the indentation amount, e.g.:

<style type="text/css">
p {
  text-indent: 40px;
}
</style>