I'm stuck on how to use the 'text-overflow' function.
Heres my code:
<style type="text/css">
#filenm { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } </style>
<td width="614" height="28" colspan="18" background="images/site_23.gif"><div id="filenm" style="display:block; font-family:Arial, Helvetica, sans-serif; color:#FFF; text-align:center;"> <?php $filename = $_GET['filename']; echo 'File Name:'.$filename.'.zip'; ?></div></td>
Id like the text in the div 'filenm' to not over-flow out of the box that it is in.
Huge thanks to anyone who can help!
You need to set a height for overflow for it to work:
#filenm{
height: 300px;
}
With this example you hide the text if its not fit in the div and replace the text that not fit in to dots. You can see a working version on http://jsfiddle.net/McXav/8/
HTML
<div> This text is way to long for this div</div>
CSS
div {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width: 100px;
padding: 10px;
}
Output
This text is w...
Related
Hi I have a problem with my site. For some reason my text is breaking lines.
For example I have the word Hip Hop but it's showing up as
Hip
Hop
here is the html
<div class="medium-2 column first-post-category">
<h1 class="category-first"><?php $cat = get_the_category(); $cat = $cat[0]; echo ''; echo $cat->cat_name; echo ''; ?></h1>
</div>
and here is the css
.first-post-category{
position:absolute;
top:6%;
left:1%;
}
.category-first{
background:#0076c1;
font-family:'Khula', sans-serif;
font-size:30px;
color:#fff;
padding:6px;
}
here a photo example.
Photo One
with your current code it renders fine, but whenever you don't want break text into another line use white-space: nowrap
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
.first-post-category {
position: absolute;
top: 6%;
left: 1%;
}
.category-first {
background: #0076c1;
font-family: 'Khula', sans-serif;
font-size: 30px;
color: #fff;
padding: 6px;
white-space: nowrap
}
<div class="medium-2 column first-post-category">
<h1 class="category-first">Hip Hop</h1>
</div>
Right now I've got table that looks like this:
Part of HTML code where table content is stored:
<table class="mTable">
<tbody>
<tr>
<td id="c00">
<div class="in_val">~val(0)~</div>
<div class="in_ti">~name(0)~</div>
<div class="in_to">~unit(0)~</div>
</td>
<td id="c01">
<td id="c02">
</tr>
</tbody>
</table>
CSS code:
.in_ti
{
padding:2px;
vertical-align:top;
display:table-cell;
}
.in_val
{
font-size: 38px;
font-weight: bold;
display:table-cell;
}
.in_to
{
float:right;
clear:right;
padding:2px;
}
And I'm trying to recieve table that would looks like that:
Describing: I would want to get text format in table where name is on the top center of the cell of table, and value (val) and unit are on the bottom center of the cell of table in one line. I tried using display: inline, but I didn't get any difference.
A few things are needed to achieve this desired lay-out. First if you want to have the name as first element you should also place that within your html:
<div class="in_ti">~name(0)~</div>
<div class="in_val">~val(0)~</div>
<div class="in_to">~unit(0)~</div>
First the name than the value and unit.
Then you can add to the class of the name the following code:
.in_ti
{
padding:2px;
vertical-align:top;
display:block;
text-align:center;
}
I added display:block and text-align:center to make sure that the text is on 1 line.
For the value and unit I added the following CSS (remove the bg colors they are just for visual aspect to see how large the width of the object was):
.in_val
{
font-size: 32px;
font-weight: bold;
display:block;
float:left;
width:70%;
background-color:red;
}
.in_to
{
display:block;
float:left;
width:30%;
line-height:36px;
background-color:yellow;
}
Wrapping it all up you get this result: JSFIDDLE
What I'm looking for is that when I hover over an image or text it will automatically shows a box that contains a text related to that image. As follows:
CSS :
.owners{
width:500px;
height:300px;
border:0px solid #ff9d2a;
margin:auto;
float:left;
}
span.own1{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 250px;
width:310px;
letter-spacing: 1px;
line-height: 20px;
position:absolute;
text-align: center;
text-transform: uppercase;
top: auto;
left:auto;
display:none;
padding:0 0px;
}
p.own{
margin:0px;
float:left;
position:relative;
cursor:pointer;
}
p.own:hover span{
display:block;
}
HTML :
<div class="owners">
<table width="100%" height="100%" align="center" border="1">
<tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
<tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
</table>
</div>
The output for the above codes is a table that contains list of employee images and their names. So when I hover the mouse on top of them, a box shows that contains the text related to it BUT they are shown behind the images and names, by that I mean I am looking to make this box stand in front of the images not behind them. I hope this makes sense! I've tried changing position:absolute and position:fixed but none works as needed!
You can check this also : http://jsfiddle.net/g1o8vyqd/
JSFiddle
Just add the code and you should confirm there is no z-index higher than your hover element.
z-index:9;
to:
p.own:hover span{
display:block;
z-index:9;
}
Use z-index:1 to raise the element above the rest:
p.own:hover span {
display:block;
z-index:1
}
Fiddle: http://jsfiddle.net/g1o8vyqd/3/
Note, also, that your markup is not very good: besides the fact that table is being used incorrectly (it's for tabular data), you are using the font tag, which is obsolete. (In fact, it was deprecated in HTML 4)
Do you mean something like this?
p.own{
margin:0px;
float:left;
position:relative;
cursor:pointer;
opacity: 0;
}
p.own:hover span{
display:block;
opacity: 1;
z-index: 99;
}
Alihamra, It sounds like you are looking for a tooltip. I would recommend cleaning up your code like the previous answers/comments outlined and then trying to utilize something like this: http://www.menucool.com/tooltip/css-tooltip.
Thanks
i have very simple scenario but i am really stuck with it and need your help please .
this is what i have to do .
This is a div with righ and bottom border and and image in its top . I have to display text same as this one . For this i am using bootstrap like this
<div class="span4" >
<h1 class="BoldText">
GET A QUOTE
</h1>
<span class="SimpleText">
INSERT TEXT HEREINSERT TEXT HEREIN-SERT TEXT HEREINSERT TEXT HEREINSER
</span>
</div>
now problem is that i have to show it in middle of box , if i set margin-left to h1 and <span> tag this is how it looks like this padding also does not work here . will someone guide me how do i adjust it . it seems simple but i am really unable to get it .
I would set widths:
http://jsfiddle.net/4YUtW/
.span4 {
width:300px;
border:1px solid #666;
}
h1 {
width:226px;
display:block;
margin:0 auto;
}
.SimpleText {
width:226px;
display:block;
text-align:justify;
margin:0 auto;
}
but, there are probably better solutions... Of course, you will have to change values to fit your needs.
You will need to set up your CSS as such:
#img {
background:transparent url('http://thebuzzdoha.com/wp-content/uploads/2014/06/fifa-world-cup-wallpaper-hd.jpg') top center no-repeat;
height:200px;
width:100%;
margin:0 0 20px 0;
}
.span4 {
border:1px dotted Black;
margin:0 auto;
width:400px;
text-align:center;
}
.span4 a {
color:Black;
text-decoration: none;
font-family: sans-serif;
}
.SimpleText {
display:inline-block;
margin:0 auto;
width:70%;
text-align:justify;
}
You can see this here->http://jsfiddle.net/5KjXq/
Hope this helps!!!
So, if you're not particularly attached to using bootstrap, doing this in pure html and css is relatively simple and usually a whole lot easier to read than the bootstrap spit-out code. I have made a fiddle with an example: http://jsfiddle.net/6aJJ5/1/. Hope that helps!
I'm using Python implementation of Markdown with codehilite and lineos option. It produces a code like this:
<table class="codehilitetable">
<tr>
<td class="linenos">
<div class="linenodiv">
<pre>1
2</pre>
</div>
</td>
<td class="code"><div class="codehilite"><pre>
<span class="k">def</span>
<span class="nf">func</span>
<span class="p">(</span>
<span class="n">n</span>
<span class="p">):</span>
<span class="k">return</span>
<span class="n">n</span>
<span class="o">**</span>
<span class="mi">2</span>
<span class="o">+</span>
<span class="mi">3</span>
<span class="o">*</span>
<span class="n">n</span>
<span class="o">+</span>
<span class="mi">1</span>
</pre></div></td>
</tr>
</table>
This is a table with one row and two cells; first cell is for line numbers and second is cell is for actual code. The contents of each cell are inside a div and pre element and span elements are used for syntax coloring.
I would like to display a horizontal scrollbar in case a line of code is too long, but I'm having problems, because it's a table.
Ideally I'd want the scrollbar just on the code cell (td.code), but this only works if set width of the table to 100%, which makes both cells long 50%. I want the line-number cell (td.linenos) to be just as long as it's required for the actual line-numbers to be shown.
Here's my current CSS:
pre, code { overflow:auto; }
table.codehilitetable { table-layout: fixed; white-space: nowrap; width:100%; }
If this is not possible, then I'd like to have a scrollbar on the whole row (tr). But the above code doesn't work on table rows.
.codehilite{
width:100%;
height: auto;
overflow: auto;
}
That will make the div inside the code table cell have a horizontal scrollbar if needed.
Not all of this is necessary, but some of this made it work.
for some reason making the pre container really small made it scroll properly.
.codehilite pre, .codehilitetable .linenodiv pre {
font-size: 1em;
line-height: 1.4em;
}
table.docutils, table.docutils tbody, table.docutils tr, table.docutils td {
width: 100%;
max-width: 100%;
display: block;
}
.codehilitetable td.linenos, .codehilitetable .linenodiv pre {
padding: 0;
border-right: none;
display: table-cell;
width: 50px;
}
.codehilitetable td.code {
display: table-cell;
overflow-x: scroll !important;
}
.codehilitetable td.code .codehilite{
max-width: 100%;
}
.codehilitetable td.code .codehilite pre {
width: 10px;
max-width: 100%;
}