0

I have a sequence of span elements. I need for them to display inline until an element is reach that should "wrap". The elements that follow the "wrapped" element should continue displaying inline from there. To put it another way, I want an element to display as if it was set to block with regard to the content that precedes it, but display as if it was inline with regard to the content that follows it. Consistent with performing a cr/lf.

The solution must be based on styles only. It is preferable that the only styling change be made to the "startWord" style in the sample code.

The sample below is what I currently have. Word 1, Word 2, and Word 3 should display inline, as they do. Word 4 should display down the page below Word1, as it does. Word 5 and Word 6 display down the page from Word4 due to Word4 display being set to block, but I want them to display immediately following Word4 as if Word4 display was inline or inline-block.

Any assistance would be appreciated.

    <style>
        .word {
            border:1px solid steelblue;
        }
        .startWord {
            border:1px solid red;
            display:block;  // I want something else here that allows content to display inline after it.
        }

    </style>
    <div>
        <span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
    </div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
Len White
  • 892
  • 13
  • 25

2 Answers2

1

You could do that using float and clear, as I did below:

.word {
  float: left;
}
.startWord{
  border: 1px solid red;
  float: left;
  clear: left;
}
.startWord + .word {
  /* here any styles for the element which follows the wrapped element could go*/
}
<div>
  <span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>

If needed, you can add width: 100% to .startWord to make it full width like a block.

Johannes
  • 64,305
  • 18
  • 73
  • 130
1

If you're able to edit the html, add a <br/> before <span class="startWord">.

If not, you can add a line break as a CSS psuedo element (as per https://stackoverflow.com/a/17048164/573718), for example before every span.startWord:

<style>
    .word {
        border: 1px solid steelblue;
    }
    .startWord {
        background: red;
    }
    .startWord:before {
        content: '\A';
        white-space: pre;
    }
</style>
<div>
    <span class="word">Word 1</span>
    <span class="word">Word 2</span>
    <span class="word">Word 3</span>
    <span class="word startWord">Word 4</span>
    <span class="word">Word 5</span>
    <span class="word">Word 6</span>
</div>
dansalias
  • 737
  • 6
  • 11