Develop Reference

automatically set line-height so that there is no spacing at top and bottom

Text in html has a line-height attribute that determines how much vertical space the characters are given. By default, font size and vertical space do not match. If a span has 50px font size, line-height of 50px will produce a spacing at the bottom and top of the text.
http://jsfiddle.net/7vNpJ/773/
You can fix this by manually adjusting the line-height, such as in this example:
http://jsfiddle.net/7vNpJ/774/
<span>
BIG TEXT
</span>
span {
display: inline-block;
font-size: 50px;
background-color: green;
line-height:0.7;
}
Line height of 0.7 only works for this particular font. I am looking for a way to perform this automatically, regardless of the font applied.
So basically I am looking for equation or procedure to set font-size and line-height so that there is zero spacing on top and bottom. What do you recommend that I do? A library that contains a matching line-height for many fonts would also do the trick.

You can try like this. may be this code helps you:
var fontSize = $('.lineHeightCss').css('font-size').split('px')[0];
var t = fontSize/100*1.42857;
$('.lineHeightCss').css('line-height',t>0?.7:t);
span {
display: inline-block;
font-size: 100px;
background-color: green;
line-height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lineHeightCss">
BIG TEXT
</span>
visit here:https://medium.com/#zkareemz/golden-ratio-62b3b6d4282a

How to increase div width according to the text inside it?

I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Result:
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
So, how can I increase the div's width dinamically, depending on the text size?

There are many ways to achieve this, but IMHO the cleanest is the following.
Your problem is that the boxes are "greedy" and will try to expand to the available width.
To prevent this, you can:
Make it "float: left;"
But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
The CSS becomes:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj

Try changing display type of the div to table.
Example Here
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}

Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.

Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100% whenever you see them. inline-block will create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: table will work in this solution as well, but it has its own idiosyncrasies. I avoid them.
So your solution requires three parts:
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated div tag around each message.
Finally, you will use display: inline-block for your innermost messages elements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Just as a reference, one would expect your markup will look like the following:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-width that is larger than 50%, you will ensure that two siblings of type inline-block will be too wide for a line. If you do this, then you can dispense with the extra div in the markup.

Make graphics on left and right side of text change width depending on the amount of text?

I need to have an H1 tag centered between two graphics on the left and right of the text. The H1 text will be various widths depending on what page you are on. The dot on the left should stay on the left edge of the site and the line should extend until it reaches the edge of the text. Same for the right side. Is there a way to accomplish this by using CSS or even some jquery/javascript?
In the attached graphic, if the text was just "WHO YOU ARE" I'd need the bars on the left and right to grow wider to bump up against the edges of the text.
The background is a texture (hard to see in the example image) so using a solid color behind the text is not an option. :(

try this: http://jsfiddle.net/NpCP5/
Instead of using two graphics we use one here that extends behind the h1 and set a background colour of the h1 (for the gapped effect). This could be achieved dynamically also with a minimum space either side for the line also using only css.

This can all be done with simple html and css. It uses the image you posted for background for the 2 sides and the main h1 itself. The text in image can't be removed with css , a more appropriate image is needed.
Try the following in a page in your browser. jsfiddle.net seems to block access to the image coming from this site
Use your browser console to inspect each element css and ake adjustments as necessary. The main framework is there, you just need to adjust to your liking
HTML
<h1>
<span class="h1_left"> </span>
<span class="h1_text">H1 Title Text</span>
<span class="h1_right"> </span>
</h1>
CSS
h1 {
text-align:center;
color:#FC3;
background-image:url(http://i.stack.imgur.com/meq5P.png);
background-position:left 0;
max-width: 700px;
min-width:360px;
padding:0;
height:40px;
}
.h1_left,
.h1_right {
display: inline-block;
width:40px;
height:100%;
background-image:url(http://i.stack.imgur.com/meq5P.png);
overflow:hidden;
}
.h1_text {
background-color: #000;
display: inline-block;
height: 100%;
padding: 0 10px;
font-size:20px;
line-height:40px;
}
.h1_right {
float:right;
background-position: 100% 0;
}
.h1_left{ float:left}

HTML truncate content based on div height

I have a div with width of 130px a height of 200px.
Various text content gets displayed in this div (I've written some JS to fade in and out different content). The problem is even though I've tried truncating the text to say 180 characters, sometimes the content loaded into this div may contain a picture (or it may not) or might contain some line breaks (or may not) so a fixed character count for truncating sometimes does not clip enough of the text (i.e. the line breaks or perhaps an image will have taken up more vertical space in the div).
Ideally I'd like to truncate and add an ellipsis to the content when it is about to go over the 200px height limit - is this possible? I've looked at the CSS text-overflow property...this seems to work only really for width based truncating (or is that an incorrect assumption?)
Perhaps there is a JS based solution or maybe calcuating how many characters and image (the image sizes ARE fixed) and line break will take up and truncating after that.
Any ideas are much appreciated.

I used dotdotdot jQuery plugin to solve a similar problem. Line breaks should not be an issue with dotdotdot but inserted images should have width and height atributes specified in html.
If you are generating content dynamically you could determine image dimensions server-side (e.g. getimagesize function if you are using PHP). If this is not an option you can initialize dotdotdot inside $(window).load() but this will probably show content without ellipsis till all the media on the page is loaded.

Here's a solution:
http://jsfiddle.net/2jCHg/2/
There's a dangling ellipsis container at the end of the text container. The ellipsis is hidden using JavaScript if the text fits the container. The <span> for the ellipsis has to have a background to occlude the original text. I used flat white in my example. You can optionally use a PNG with alpha transparency to occlude the text with a nice gradient (transparent to white).
You can optionally inject the ellipsis markup with your script to keep your original markup pristine.
It's also unfortunate that the ellipsis is right-justified instead of immediately following the last character that's displayed.
Markup:
<div class="container">
<div class="summary">
Your text goes here
</div>
<div class="ellipsis"><span>…</span></div>
</div>
Style:
.container {
width: 200px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary {
height: 6em; /* adjust based on line-height * rows desired */
overflow: hidden;
}
.ellipsis {
height: 0;
position: relative;
top: -1.2em;
text-align: right;
}
.ellipsis span {
background: white; /* occlude text with background color */
padding-left: 0.5em;
position: relative;
top: -0.25em;
}
Script:
$(".summary").each(function () {
$(this).next().toggle(this.scrollHeight > this.offsetHeight);
});

Try this:
.ellipsis{
white-space: word;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}

Try this:
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Vertical align text middle in jQuery Mobile Button?

I'm attempting to shrink the height of a jQuery Mobile Button for a better fit in a list view, but I cannot get the text to line up properly. Here's my implementation so far:
.listDelBtn .ui-btn-text {
margin: -5px -15px -5px -15px;
}
<a class="listDelBtn" data-role="button" data-theme="b" style="float: right; width: 75px; line-height: 11px; margin-top: 6px; z-index: 12; padding: 0 0px 0 0px;">delete</a>
the styled margins do affect the width of the button to give it a shorter length, however, the top and bottom margin values have no affect, regardless of the values tried. I've also attempted various padding , height, and other values with no luck. Line height was also the only inline style that had any affect on height of the button, but the text within is misaligned. Attempting on versions 1.0b1+ of jQuery Mobile btw.
Here's an image of the resulting button for reference:

You can give height to your button then give same line-height to it.
For example
.listDelBtn{
height:30px;
line-height:30px;
}
Check this example http://jsfiddle.net/EQash/

#Inator I think vertical align middle works only for the Table elements and not for other cases.
In that case in the class you apply to button:
Set: display: table-cell
and vertical-align: middle
and possibly create a outer element say div and set its display to table
like display: table
and vertical-align: middle
Hope it might work

The Inline margin-top style takes precedence over the the styles defined in the CSS class. That's why CSS defined values have no effect. Solution is to add
margin-top: -5px !important;
to your CSS if you want the negative top margin to take effect.