Flexbox Adding Newline to Clipboard

Removing line breaks in text copied from a flex container

You're going to have to find another solution.

In a flex container the child elements ("flex items") are automatically "blockified" (details).

This means that a flex item takes on some of the characteristics of block-level elements, including taking up all space in the row.

You may be tempted to just set the items to display: inline. This would be a waste of time. The display value of flex items is controlled by the flex algorithm, and any attempt to override that setting is ignored.

How do I not stretch a flexbox's or grid item's natural text-height (using background-color on the text)?

As explained in a previous question the flex item are automatically "blockified" and the effect you are looking for only apply to inline element.

In case you want to only have the vertical space between each line where there is no background, you can consider a gradient. The tricky part is to find the correct values in order to only cover the content area with the color of the gradient.

/* ======================= 

   General Styles (not relevant) */

section {

  min-height: 15em;

  font-family: sans-serif;

  line-height: 1.4;

  padding: 1em;

  margin-bottom: 1em;

}

h2 {

  display: inline;

  font-size: 1em;

  line-height:1.2em;

  background:

    repeating-linear-gradient(to bottom,

      transparent 0,transparent 0.1em,

      white 0.1em,white 1.1em,

      transparent 1.1em,transparent 1.2em);

  margin-bottom: 0.5em;

}

#one h2 {

  background:#fff;

}

/* ======================= */

/* Layout [ 1 ]: Just a little padding on the left */

section#one {

  padding-left: 50%;

  background: darkblue;

}

/* Layout [ 2 ]: Using flexbox */

section#two {

  display: flex;

  justify-content: flex-end;

  align-items: baseline;

  background: seagreen;

}

section#two h2 {

  flex-basis: 50%;

}

<section id='one'>

  <h2>[ 1 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>

</section>

<section id='two'>

  <h2>[ 2 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>

</section>

Flexbox: how to wrap a flex item once the width of another flex item is 0?

You can approximate this by using a big flex-shrink on the first container. This will give more priority to the first container for the shrink effect.

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
  flex-shrink:99999;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

Make selector contribute to element width

Here is an idea using flexbox. The trick is to make the span an inline-flex container with a column direction so we keep the pseudo-element in-flow; thus it will affect the width of the container.

The widest one between the current content and the pseudo element will define the width.

p {

  margin-top: 50px;

}

span.chunk {

  position: relative;

  display: inline-flex;

  flex-direction: column;

  vertical-align: bottom; /*This is mandatory to keep the text without chunk in the bottom*/

}

span.chunk:before {

  content: attr(data-chord);

  position: relative;

}

<p>

  As

  <span class="chunk" data-chord="CCC">I was going over the</span>

  <span class="chunk" data-chord="Am a long text">f</span> 

  more text here

  <span class="chunk" data-chord="BB">ar</span>

</p>

How to remove newline character when copying to clipboard

Just found an answer:

   -n, --no-newline
          do not output the trailing newline

rl() { readlink -fn "$1" | xclip -i -selection clipboard; }