Reputation: 812
I'm displaying the output of a real-time running log file which can be very long (and wide) and looking for a way to bound (box) it inside a border.
The page itself is HTML/PHP and I've been trying with CSS with various parameters but can't get it right.
This is what I've tried:
.log_output {
border:1px solid #999999;
color:#6f6f6f;
font-size:10px;
display:block;
float:left;
width:100%;
height:100px;
display: block;
position: relative;
}
But the log text ignores the box and is displayed all over the page.
An ideal solution would show only the last few lines (or 100px for example) of the running log.
I'm open to using JS or whatever if needed.
Upvotes: 1
Views: 16461
Reputation: 10207
Two ways are there.
First is you can set auto height so that height will be adjust according to the text like this
.log_output {
border:1px solid #999999;
color:#6f6f6f;
font-size:10px;
display:block;
float:left;
width:100%;
display: block;
position: relative;
}
No need to mention height in this it will be auto by default.
And if you need to set height fixed then use this css
.log_output {
border:1px solid #999999;
color:#6f6f6f;
font-size:10px;
display:block;
float:left;
width:100%;
height:100px;
display: block;
position: relative;
overflow:auto;
}
This will show scrollbar in the box (if needed) and if text is short no scrollbar will come
its up to you which way you want to go with
Upvotes: 1
Reputation: 11808
Use the following CSS::
.log_output{
border:1px solid #999999;
color:#6f6f6f;
font-size:10px;
width:100%;
position: relative;
display: inline-block;
height: auto;
}
You have to set 'display:inline-block' and 'height:auto' to wrap the content within the border.
Upvotes: 2