CODEWITHSUNDEEP
htmlcss
o_ren
o_ren

Reputation: 812

Wrap text in a box with CSS, HTML

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

Answers (2)

Gaurav Aggarwal
Gaurav Aggarwal

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

Domain
Domain

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

Related Questions