Menu
I would like to achieve text-alignment effect like on the screen above. Any suggestions?
755
If you need to place a border inside a <div> element, you are in the right place. In this snippet, we’ll demonstrate how this can be done using some CSS properties. Start with creating HTML. Use two <div> elements. Set the box-sizing property to “border-box”. Also, use the -moz- and -webkit- prefixes. Set the width and height of the <div> to 120px.
CSS allows aligning divs side by side in many ways. We’ll discuss some ways that are widely used. The <div>tag is used to define parts of a page or a document. It is used for grouping large sections of HTML elements and styling them with CSS. Three or more different divs can be put side-by-side using CSS.
From the examples on the previous pages, you have seen that it is possible to specify a different border for each side. In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left): If the border-style property has four values: If the border-style property has three values:
Creating diagonal borders in a conditional format in Excel can be a bit tricky, but it is definitely possible! Here's how to do it: First, select the cells that you want to apply the conditional format to. In this example, we'll select cells A1:D4. Next, go to the Conditional Formatting menu and choose New Rule. A new dialog box will appear.
I believe you are looking for the shape-outside property.
The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box.
This allows for values such as:
However, its current support is very weak, with only really chrome supporting it.
For more information, please see here
Small work around
Disclaimer This should only be used for demo only and I do not recommend this approach in a production environment
you may be able to use nth-child if you knew how many lines this paragraph will be, but this presumes you'll be using a set width/etc:
div {
background: tomato;
width: 500px;
display: inline-block;
height: 300px;
}
div span {
display: block;
}
div span:nth-child(1) {margin-left: 0px;}
div span:nth-child(2) {margin-left: 10px;}
div span:nth-child(3) {margin-left: 20px;}
div span:nth-child(4) {margin-left: 30px;}
div span:nth-child(5) {margin-left: 40px;}
div span:nth-child(6) {margin-left: 50px;}
div span:nth-child(7) {margin-left: 60px;}
div span:nth-child(8) {margin-left: 70px;}
div span:nth-child(9) {margin-left: 80px;}
div span:nth-child(10) {margin-left: 90px;}<div>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
<span>Some nice long text</span>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
