css: multiple spans in one line-CodePudding

I have following type of html and I to align it in one line. First span is of short/long text, second span is of button and third span is of lines.

<h2>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</span>
<span><button>
Deactivate
</button></span>
<span>
  Lines
</span>
</h2>

Currently right button and lines span changes its position according to first span text length.

First text can be change, it may be short or long. So I need like its fixed width so that it will change in that only. Right button and lines span will not change according to first text.

I am not good at css at all, just know basics. I am confused how I can adjust those spans to come in one line. I am guessing that all spans and parent h2 tag will need some css (display:flex etc) but don't know how and what else will need to achieve that.

Please guide and help. Thanks.

Sorry I could not able to recreate exact html and css that I have. Above is example of it.

Edit: https://jsfiddle.net/n_m_t/9gj8dpLa/1/

CodePudding user response：

just use display:block and width:max-content in span tag then check if you want to width according to screen so use just display:flex

  <h2>
        <span style="display: block;width: max-content;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </span>
        <span><button>
        Deactivate
        </button></span>
        <span>
          Lines
        </span>
        </h2>

CodePudding user response：

Try this

<h2>
<span style="
    max-width: 67%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

</span>

<span> <button>Deactivate</button> </span>

<span> Lines </span>
</h2>

CodePudding user response：

You can set h2 as flex and let the first span to take up available space.

CSS

h2 {
   display: flex;
}
h2 span:first-child{
   flex: 1 1 auto;
}

CodePudding user response：

If You're OK to make the first line scrollable, You may try this (EDIT JS added to see the changes between long and short text) :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll</title>
    <style>
        h1{
            padding: 10px;
        }
        h2{
            padding: 10px;
        }
        b{
            color:indianred
        }
        .container{
            position:absolute;
            margin-left: 5%;
            margin-right: 5%;
            width:90%;
            border:1px solid #000000;
        }
        .longText{
            position:relative;
            overflow-x: scroll;
            overflow-y: scroll;
            word-wrap: break-word;
            height:100px;
            width:300px;
            float:left;
            clear:right;
            padding: 10px;
        }
        .floating-button{
            position:relative;
            word-wrap: break-word;
            height:auto;
            width:auto;
            float:left;
            clear:right;
            padding: 10px;
        }
        .floating-left{
            position:relative;
            word-wrap: break-word;
            height:auto;
            width:auto;
            float:left;
            clear:right;
            padding: 10px;
        }
    </style>
    <script>
        let initText=true;
        let short = "<b>Short text : </b>Hello world!";
        let long = "<b>Long text : </b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.";
        function foo(){
            if(initText == false){
                document.getElementById("short-long").innerHTML = short;
                initText = !initText;
            }else{
                document.getElementById("short-long").innerHTML = long;
                initText = !initText;
            }
            
        }
    </script>
</head>

<body>
    
    <div >
        <h1>Title 1</h1> <!-- Only one h1 tag MAIN TITLE! -->
        <h2>title 2</h2> <!-- h2 Only for important short text (not for buttons...) -->
        <div id="short-long" >

        </div>
        <div >
            <button onClick="foo();">
                Click to change text.
            </button>
        </div>
        <div >
            Lines
        </div>
    </div>
    <script>
        foo();
    </script>
</body>
</html>

Best regards.