CSS Selector for First Element of Visual (Block Reflow) Row

CSS selector for first element of visual (block reflow) row

Yes, Its possible through CSS but only if you can fix the elements in every row.

Since you haven't provided your case, here is an example.

Suppose, your elements are stacked up in a ul and li pattern and are three lists in a row, then you can use the following css snippet.

li:first-child, li:nth-child(3n+1) {
    background: red;
}

Demo

Create visual borders between elements on the same line

You can fix this by using a container with the overflow hidden, and a negative margin to “drag” the elements at the beginning of the line outside of that overflow area.

(In this particular example the overflow:hidden is not really necessary, the outer scrolling element already takes care of that, but in different scenarios it might be needed.)

The 1.5em value used here is a bit of a magic number; you might want to replace it with a pixel value, since you’re using pixels for the border and its spacing from the text already - but in general, you should be able to find “working” values with a little bit of experimentation.

.resizable {  resize: horizontal;  overflow: scroll;  border: 1px solid black;  height: 95vh;  box-sizing: border-box;  min-width: 120px;  max-width: 100%;  padding: 10px;}.container {  margin-left: -1.5em;  width: calc(100% + 1.5em);}span {  font-size: 18px;  font-family: sans-serif;  margin-left: 10px;  border-left: 2px solid #aaa;  padding-left: 10px;  display: inline-block;}

<div class="resizable">  <div class="container">  <span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span><span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span><span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span>  </div></div>

Set equal vertical margins to any block element at once

The best way I have found so far is to use the Universal Selector:

:root {  --custom-vertical-margin: 1.5rem;}
* {  margin-top: var(--custom-vertical-margin);  margin-bottom: var(--custom-vertical-margin);}

Why do li items default to a newline?

The CSS1 spec for list-item elements says:

Elements with a 'display' property value of 'list-item' are formatted as block-level elements, but preceded by a list-item marker. The type of marker is determined by the 'list-style' property. The marker is placed according to the value of the 'list-style' property:

However, MDN describe their implementation of the spec in the following way, stating that the list-item display value:

...generates a block box for the content and a separate list-item inline box.

Either way, display:list-item will generate a block level element which forces itself to be drawn on a new line by essentially adding a line-break before and after its content.

Responsive text-align based on position

It looks like the answer to the core question:

Is there a means, via CSS only, to alter the justification of an element and its children based on whether it's orientated more towards the left or right of the screen?

is no.

As a more thorough follow-up answer I thought I'd mention that I'm not going with my original plan B of styling drop-down menus to be fixed at smaller screen sizes. I hinted at this in my question but it's become more apparent that I cannot rely on screen size to determine if a drop-down menu will be truncated in the future. So given that media queries are now ruled out, I need another solution if I want to ensure that I don't provide a sloppy solution to any device.

Which leaves me with javascript. I was trying to avoid this but, at this stage, I would be stubborn to do so given the outcome.

Method

Incase it's of use to anybody else, I used jquery to provide a listener for hovering over drop-down menus. The logic is that all elements of a certain class are guaranteed to have a drop-down menu, comprised of a <ul> of another class. So I can target both easily.

I could check if the drop-down menu is to the right or left of the screen. This would work fine. Being picky, I'd rather the menu stay justified to the left unless it's about 200 pixels from the right of the screen - a safe threshold for my dynamic content. I could go and measure each dropdown width and use that as a threshold if I ever run into issues.

Putting all of this together. If I hover over a dropdown menu and it finds itself to be less than 200 pixels from the right of the screen, it will both justify its menu to the right and absolute position the dropdown menu to the right-most side of its parent menu label/trigger (as I showed in my original illustrations). There are more flexible and shorter versions of doing this and it's also not much more work to do without jquery for anyone avoiding the library:

JS Code

$(nav).on('mouseover', '.dropdown', function() {

    var dropdownlist = $(this).children('ul');
    var screenWidth = $(window).width();
    var parentOffsetLeft = $(this).offset().left;
    var spaceRight = screenWidth - parentOffsetLeft;

    if (spaceRight < 200) {

        $(dropdownlist).css('text-align', 'right');
        $(dropdownlist).css('right', '0');
        $(dropdownlist).css('left', 'initial');

    } else {

        $(dropdownlist).css('text-align', 'left');
        $(dropdownlist).css('left', '0');
        $(dropdownlist).css('right', 'initial');

    }

});

Using this javascript, I can recreate the solution illustrated in the question.

CSS Properties: Display vs. Visibility

The visibility property only tells the browser whether to show an element or not. It's either visible (visible - you can see it), or invisible (hidden - you can't see it).

The display property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline element (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block (i.e. it acts like a block box but is laid inline instead) and some others (list-item, table, table-row, table-cell, flex, etc).

When you set an element to display: block but also set visibility: hidden, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.

In other words, this means elements with display that isn't none will still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: none will behave as if that element was never there (although it remains in the DOM).

Can CSS force a line break after each word in an element?

Use

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).

How can I set a minimum amount of space between flexbox items?

You can add another div with flex style for holding the needed gap between inner divs. and for the minimum width for that gap use this property (as mentioned in W3Schools.com):

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

which flex-shrink is :

flex-shrink: A number specifying how much the item will shrink relative to the rest of the flexible items

so, for example you set this css code for the gap div :

flex: 1 0 10px;

that tells gap div will have 10px width, and will grow relative to the rest of the flexible items, but WON'T SHRINK. so the minimum width will be 10px at the narrowest width of the screen.

---

Related Topics