Pre

关于pre需要单独一篇blog.

pre值得研究一下

这个标签是三兄弟

• code 显示代码用的, 如果是多行代码, 建议放到pre里面.
• pre 其实就他最特殊, 显示很特殊.
• samp 展示输出用的, 可以嵌套kbd(代表用户输入).

pre 初解

• pre的意思就是不会忽略空格, 换行, tab等等空白字符.
• pre里面的html标签也会正常显示.
• 块级元素会出现问题, 因为回车的影响会有多余的换行出现.
  • 这个很有趣, 块级元素紧邻的文字是正常的. 也就是说两个块级中间总是可以加入一行的.
  • 但是两个块级会出现问题. 例如两个相邻的h3.
  • 还有一个很magic的解决方案, margin用负数. 因为两个块级中间总是能加入一行, 因此这个方案整体不靠谱.
  • 仔细看了一下, 问题有点严重, 不论是否块级, 中间都有空行, 整体会离散开.

pre会面临的问题

• 长度超出, 不自动wrap. 解决方案: white-space: pre-wrap;
• 我们不想要的tabs, newlines and spaces. 多余的tab 换行 空格, 就是之前咱们面临的问题. 貌似这个问题和pre + editable有关, 试验一下.

一个重要的判断: pre的块级元素嵌套会多余换行问题是editable引起的吗?

• 结论: 并不是. 不论是否editable, pre中的h都会有多余换行, inline-block完美解决这个问题.

貌似完美的解决方案是inline-block

pre h1,
pre h2,
pre h3,
pre h4,
pre h5,
pre h6 {
    display: inline-block;
}

pre 可以显示class 有趣

确实可以, 是显示再内容的尾部

pre[class]:after {
    content: 'highlight: ' attr(class);
    display: block;
    text-align: right;
    font-size: smaller;
    padding-top: 5px;
}

下面的html里面两个pre都有自己的class, 都会被显示再尾部

<pre contenteditable="true" class="content editable">
       diyidua
       <h5>woshih5</h5>
       <h6>woshih6</h6>  class会显示在这里: 
   </pre>
<pre class="pure pre">
       diyiduan   can\ not edit
       secon
       <h5>woshih5</h5>
       <h6>woshih6</h6>  class会显示在这里: 
   </pre>

如果不加wrap, 自动显示全文

pre:hover,
pre:focus {
  width: min-content;
}

如果使用下面这一套, 那么, 其实用不用pre都可以, 用在div上面也是一样的效果, contenteditable也能hold住.

[ contenteditable="true"],
pre#pure {
    display: inline-block;
    /* 这个会导致不自动生成div啥的. 但是, 会有br*/
    /*            width: 80%; 这一条需要加进来, 因为display: inline-block;会导致整个块缩起来 */
    /*            margin: auto; 这个其实会对editable的pre失效*/
    padding: 10px;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    white-space: pre-wrap;
    /*tab的关键性代码*/
    border: 1px solid rgb(155, 72, 72, 0.5);
    width: 300px;
    /*            margin: auto;   这里导致正常pre居中, contentable继续靠左*/
    border-left: 11px solid #ccc;
    padding: 10px;
    clear: both;
    background: rgba(201, 167, 123, 0.555);
}
[ contenteditable="true"] h1,
[ contenteditable="true"] h2,
[ contenteditable="true"] h3,
[ contenteditable="true"] h4,
[ contenteditable="true"] h5,
[ contenteditable="true"] h6
{
    display: inline-block;
}

参考内容:

• https://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/