0

I have some panels that hold various amounts of text, HTML below

<div class="row1">
 <div  class='item'>
    <div id='' class='well panel panel-primary'>
       <div class='panel-heading'>
          <h4><i class='fa fa-cloud'></i>Text</h4>
       </div>
       <div class='panel-body'>

       </div>
    </div>
 </div>
</div>

Inside the class - 'panel-body', I will have text inside of various amounts, some quite a bit, some not soo much,

How can I make it when the size of the panel gets to a cetain size when i cut off the text, and put a button. The main idea is to get consistant sizing of the panels

Ideas ? JSFiddle Test

As in the Fiddle above i want to always be the height of Test 3 & Test 5. When like test 1 - put in button that says read more (with a hyperlink)

James_Inger
  • 83
  • 2
  • 10
  • So when the panel gets to a certain width, you want to display a button **instead** of the text? So essentially you're asking for when an element reaches a certain size, how can you replace the contents? – Obsidian Age Jun 22 '17 at 02:56
  • When it reaches a certain height - stop and then put in button to see more of the text, like counting characters and also keeping track of carriage returns, then stop when either one has got to the max height of the panel – James_Inger Jun 22 '17 at 03:03
  • I hate to recommend a plugin, but it really sounds like you're looking for jQuery's [**dotdotdot**](http://dotdotdot.frebsite.nl/). It can even be extended to show [**buttons instead of ellipsis**](https://stackoverflow.com/questions/25187774/how-to-implement-read-more-and-read-less-with-dotdotdot). – Obsidian Age Jun 22 '17 at 03:15
  • OK i modified the JSFiddle above, and added a class to the panel-body, which sets the height, and then hides the overflow – James_Inger Jun 22 '17 at 03:19
  • OK dont mind using a plugin, ill have a look – James_Inger Jun 22 '17 at 03:20
  • Cheers mate - that will work - Good man :) – James_Inger Jun 22 '17 at 03:25

0 Answers0