Render a Tab character (in PRE element) as 4 spaces in HTML? [duplicate]

后端未结

关注

 4  545

醉话见心

相关标签:

4条回答

暗喜

2021-02-05 14:43

There is a series of four characters you can use which always expands to four spaces. It's four spaces (within pre at least and other elements styled appropriately).

Since there is no universally agreed-upon method of how wide a tab should be and how exactly it should behave it's best not to use it in places where you need precise control over how the output looks. Neither HTML nor browsers provide any means of setting the tab width.

0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2021-02-05 14:48
While I agree with the first answer that you might as well just put 4 spaces, there does seem to be some support for a tab-size property within CSS (though IE support is lacking):
```
pre {
    -moz-tab-size:    4; /* Firefox 4+ */
    -o-tab-size:      4; /* Opera 11.5 & 12.1 only */
    tab-size:         4; /* Chrome 21+, Safari 6.1+, Opera 15+ */
}
```
Only effective using white-space: pre or white-space: pre-wrap (or within <pre> tags).
- W3C specification
- jsFiddle demonstration
- Browser support
0 讨论(0)
发布评论:

提交评论
- 加载中...

南方客

2021-02-05 14:51

CSS is the best way to handle this for viewing purposes. But if you want people to be able to copy/paste the text and get four spaces for a tab, then you're going to end up using Javascript to modify your pre tags.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <pre class="downtab">All    Tabs    Changed a   little.</pre>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".downtab").each(function() {
                var text = $(this).html().replace(/\t/g, '    ');
                $(this).html(text);
            });
        });
    </script>
</body>
</html>

The real magic here is the replace() function, using a globally-matched regex.

0 讨论(0)

北荒

2021-02-05 14:58

By HTML specifications and in browser practice, tab stops are at every 8 character. This does not mean that a tab is 8 spaces. For example, if you have ABC DEF, then the tab causes an advance of 5 characters.

In CSS, by a CSS3 draft, you can set the “tab size”, i.e. the distance between tab stops, e.g. tab-size: 4. Browser support is fairly good, when vendor prefixes are used too, except on IE.

0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题