This is the 9th day of my participation in Gwen Challenge

Hyphen line break

problem

Text-align: justify allows text to be aligned at both ends of a paragraph, but in English a long word is pushed to the next line, where words are spaced uncomfortably apart. So is there a way to use a hyphen to switch words to the next line?

The solution

Css3 introduces a new property 登 记. It accepts three values: None, manual, and auto. Manual is its initial value, and you can manually insert a soft hyphen at any time to break a line. None disables this behavior; Amazingly, [登 记 : Auto] just did what was needed.

Insert a line break

problem

Inserting a newline through CSS is usually associated with defining lists, but sometimes involves other scenarios as well. For example, consider this code:

<dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dt>Email:</dt>
    <dd>[email protected]</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>
Copy the code

You want to show something like figure 1, so you add some styles, but dt and DD are block-level elements, so you show something like Figure 2, so you add display: inline-block and you get something like Figure 3.

So is there a way to achieve the end result?

The solution

Instead, add a line break at the end of the DD, and using manual

is not only bad for the maintainability of the code, but also contaminates the hierarchy of the code. There is A Unicode character for the newline character: 0x000A. In CSS this character is written as “\000A”, or simply “\A”, so it can be used as the content of the ::after pseudo-element and added to the end of the DD.

dd::after{ content: "\A" }
Copy the code

Try it out and find that nothing has changed. This CSS code is equivalent to adding a line break before all closing tags in the HTML structure. But by default in HTML, input newlines are merged with other adjacent whitespace characters. Using white-space: pre to preserve whitespace, the final code looks like this:

dt.dd { display: inline; }
dd {
    margin: 0;
    font-weight: bold;
}
dd::after {
    content: "\A";
    white-space: pre;
}
Copy the code

The above code seems to do what you want, but if you add a mailbox after the second line, you will find that the new mailbox is automatically folded to the next line, indicating that the code is not robust enough.

dd+dt::before {
    content: '\A';
    white-space: pre;
}
dd+dd::before {
    content: ', ';
    font-weight: normal;
}
Copy the code

Zebra stripes on text lines

problem

A few years ago, after the: nth-Child () / :nth-of-type() pseudo-class was acquired, one of the most commonly used requirements to address was the “zebra stripe” of the table. All you need is the following code to implement the “zebra stripes” of the table.

tr:nth-child(even) {
    background: rgba(0.0.0.2);
}
Copy the code

But applying it to a line of text is a bit of a stretch. You have to wrap text in divs and use pseudo classes to do that. So, is there a solution that can be applied to lines of text?

The solution

You can set a uniform background image for the entire element, adding all the zebra stripes at once. The background image is generated directly with gradients in CSS, and the background size can be set in em units so that the background automatically ADAPTS to font size changes.

<style>
pre{
    padding:.5em;
    line-height: 1.5;
    background: hsl(20.50%.95%);
    background-image: linear-gradient(rgba(120.0.0.1) 50%, transparent 0);
    background-size: auto 3em;
    background-origin: content-box;
    font-family: Consolas, Monaco, monospace;
}
</style>
<pre>
    <code>
        while (true) {
            var d = new Date();
            if (d.getDate()==1 &amp;&amp;d.getMonth()==3) { alert("TROLOLOL"); }}</code>
</pre>
Copy the code

Adjust the width of the TAB

problem

Code is usually displayed using 

 and  elements, which have default styles assigned by the browser. These default styles tend to be:
pre, code {
    font-family: monospace;
}
pre {
    display: block;
    margin: 1em 0;
    white-space: pre; 
}
Copy the code

Default styles are not nearly enough to solve the problems of code presentation. Although a TAB is a great way to display code, people often don’t use tabs because they display eight characters on the browser, which is ugly for presentation and a huge waste of space.

The solution

Css3 provides a new CSS property tab-size to control this situation, which can accept either a number (representing the number of characters) or a length value (not often used). We usually set it to either 4 or 2 (2 is more common).

pre{ tab-size:2; }
Copy the code

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.