- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4956
To add three dots at the of too long text can be done with text-overflow: ellipsis.
HTML:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <div id="textEllipsis">The quick brown fox jumps over the lazy dog</div> <body> </html>
CSS:
#textEllipsis {
text-overflow: ellipsis;
width: 200px;
white-space: nowrap;
overflow: hidden;
}
The only problem with this approach is if you need wordwrap then it seems that you will have to use javascript...
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 5170
Example of tables in CSS.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div class="tile-grid-row"> <div class="tile-container"> <div class="tile-small"> Tile one </div> </div> <div class="tile-container"> <div class="tile-small"> Tile two </div> </div> </div> <div class="tile-grid-row"> <div class="tile-container"> <div class="tile-small"> Tile three </div> </div> <div class="tile-container"> <div class="tile-small"> Tile four </div> </div> </div> </body> </html>
CSS:
.tile-grid-row {
display: table;
width: 444px;
}
.tile-container {
display: table-cell;
}
.tile-small {
width: 221px;
}
In HTML notice line: <div class="tile-grid-row">, then notice how I defined CSS class:
.tile-grid-row {
display: table;
After that in CSS notice line: display: table-cell;
display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs.
Example download from here.
---
Better and simple example of table with borders.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
<div class="tile-table">
<div class="tile-row">
<div class="tile-cell">
<div class="description-text">
Tile one
</div>
</div>
<div class="tile-cell">
<div class="description-text">
Tile two
</div>
</div>
</div>
<div class="tile-row">
<div class="tile-cell">
<div class="description-text">
Tile three
</div>
</div>
<div class="tile-cell">
<div class="description-text">
Tile four
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.tile-table {
display: table;
width: 100%;
border-collapse: collapse;
}
.tile-row {
display: table-row;
border: 1px solid #000;
}
.tile-cell {
display: table-cell;
width: 50%;
border: 1px solid #000;
}
.description-text {
position: relative;
top: 1%;
}
Here notice first border-collapse: collapse, and then border in cell and row. Example download from here.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 5122
Basically we need three display values: block, inline and none.
A block element starts on a new line and stretches out to the left and right as far as it can.
An inline element will keep the text (text is taken as an example), in one line. Example:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <p> Test block 1 </p> <p> Test block 2 </p> </body> </html>
CSS:
p {
display: inline;
}
Example you can check here.
Difference between display: none and visibility: hidden, is that display: none will not reserve the place, for element, while visibility: hidden will still take the place even if element is not displayed. Examples you can see here (I am too lazy to write my own 
)
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4761
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="/index.css">
</head>
<body>
<a href="#foo" id="link">Click Here</a>
</body>
</html>
CSS:
#link {
display : block;
width: 400px;
height: 400px;
background: #BADA55;
border-radius: 200px;
text-align: center;
line-height: 400px;
}