0

Pretty basic question here but do panels in HTML only allow a certain amount of text or characters?

I have got three panels two at the top of the page and one underneath see below: 

<div class="col-sm-6">
    <div class="panel-heading"></div>
    <div class="panel-body"></div>
</div>
<div class="col-sm-6">
    <div class="panel-heading"></div>
    <div class="panel-body"></div>
</div>
<div class="col-sm-12">
    <div class="panel-heading"></div>
    <div class="panel-body">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
</div>

Please note the web text has been removed

Daniel Corzo
  • 1,055
  • 2
  • 19
  • 32
Marcus Cassidy
  • 11
  • 1
  • 1
    No, also if you are referring to divs with class "panel", those only have special significance if you are using bootstrap, otherwise it's just a plain element. – Damon Jan 02 '17 at 22:35
  • Is there any reason why the content within the panel will have overflowed out of the panel? – Marcus Cassidy Jan 02 '17 at 22:37
  • There could be numerous reasons, but it would be hard to tell since you removed the actual content here. Could be a height or max-height on the panel. Could be floated child elements. Could be something to do with the fact that you have opening/ closing tag mismatches (count your `
    ` vs `
    `Can you create a verifiable example with some lorem ipsum?     – Damon Jan 02 '17 at 22:47
  • There are no panels in HTML. In certain CSS frameworks like bootstrap, yes. In HTML, no. – Jon P Jan 02 '17 at 22:52

1 Answers1

0

in HTML only the answer is NOT ... but with jQuery you can use element.text().length or javascript element.innerText.length

MTK
  • 3,300
  • 2
  • 33
  • 49
  • I dont think my question made sense, my problem is the fact that my text has overran the size of the panel but i didnt know that panels limited the amount of text that could be contained within? – Marcus Cassidy Jan 02 '17 at 22:35
  • for this you can use css property overflow http://www.w3schools.com/cssref/pr_pos_overflow.asp And better for you I think is text-overflow: elipsis http://www.w3schools.com/cssref/css3_pr_text-overflow.asp – MTK Jan 02 '17 at 22:37
  • which text-overflow should be used to ensure that all content is contained within the panel, i have taken a look at the w3schools article but none of the values seem to achieve this? – Marcus Cassidy Jan 02 '17 at 22:44
  • You can use css : container{overflow:hidden,text-overflow:ellipsis} where "container is your panel" but the container must have dimensions width height or max-width max-height . see example here http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow – MTK Jan 02 '17 at 22:46
  • i have managed to resolve it by replacing the line breaks with paragraphs, so it must've been a problem with including the line breaks, for future reference do you have any ideas why this could be? – Marcus Cassidy Jan 02 '17 at 23:01
  • ellipsis work to a single line of text. But you can find in the web some tricks for solve that: like white-space:nowrap or http://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text or line-clamp (not working in all browsers) https://css-tricks.com/line-clampin/ – MTK Jan 02 '17 at 23:11