CODEWITHSUNDEEP
htmlcss
Yossi Vainshtein
Yossi Vainshtein

Reputation: 3985

How to limit div to 2 lines of text, expand horizontally if needed to acomodate content

I'm a bit new to CSS...

I have a div element containing several other divs in a row. (These are meant to be tabs in a page with several tabs)

I want the height of the divs to allow only 2 lines of text, even if the screen size is narrow. If more space is needed to accommodate the text, make the box wider (expand horizontally), up to a certain width (beyond which the text would be truncated).

If the tabs dont fit in the screen, add a scroller, but never make the parent div take a lot of vertical space - never expand vertically.

Here's a jsfiddle, when i make the browser window narrow it expands vertically, and I want to expand horizontally always.

Thanks

Upvotes: 2

Views: 908

Answers (2)

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

Well its totally from scratch so you can pick the idea.

HTML code

<div id="content">
        <h3>
            Here is content
            <span id="button">+</span>
            <div style="clear:both;">
        </h3>
        Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content Here is content 
    </div>

CSS Code

    <style>
        #content{height: 80px; overflow: hidden;line-height: 22px; width: 500px; border:1px solid #ccc; border-radius:4px;}
        #button{cursor: pointer; float: right; margin-right: 20px;}
    </style>

Script Code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('span#button').click(function(){
            var text = $(this).html();
            if(text == '+'){
                $('#content').css('height', '500px');
                $(this).html('-');
            }else{
                $('#content').css('height', '80px');
                $(this).html('+');
            }
        })
    });
    </script>

Upvotes: 1

zeev barlev
zeev barlev

Reputation: 26

.wrapper {
  max-width: 300px;
  margin: 50px;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}

.box {
  border: 1px black solid;
  padding: 20px;
}


.text{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}
    
<html>
  <body>
    <div class="wrapper">
      <div class="box"><span class="text">short text 1</span></div>
      <div class="box"><span class="text">short text 2</span></div>
      <div class="box"><span class="text">This is a long text for example bla bla bla</span></div>
      <div class="box"><span class="text">short text 4</span></div>
      <div class="box"><span class="text">short text 5</span></div>                    
    </div>
  </body>
</html>

Upvotes: 0

Related Questions