We Keep Coding

CSS - Change textline in completely visible with greasemonkey

I want to change this not completely visible CSS textline.
not completely visible textline
CSS AREA
.searchresult-title {
color: #4b4b4b;
line-height: 1.33em;
border-bottom: 1px solid #cccccc;
height: 43px;
overflow: hidden;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
HTML AREA
<div class="searchresult-title"><p>28A.4 Normalverteilung in OpenOffice.org, Wahrscheinlichkeitsdichte, kumulierte Verteilungsfunktion</p></div>
MY CODE
$('.searchresult-title').css({
'overflow': 'auto'
});

I can see in the CSS you have added overflow: hidden; which should be autofirst. I can also see that you have made the same through Javascript. So you can directly do that.
Addition to it, you can set min-height:43px; which will solve your problem.
1. Height: That defines the height of your text content.
2.min-height: That defines the minimum height of your text content. Once it goes beyond the minimum height; height will automatically increase.If you want a specific height also you can set it but with that add in your CSS class overflow:auto; so that it will not go beyond the height but at least text can be visible with a scroll.
If you have already set a height for the parent then it will work accordingly. If you set min-height for child div it won't go beyond parent height.
Also, Have you added text-overflow: ellipsis;also? I can see three dots.

Html Table: Word Break AND Limit Td Height?

I am able to limit table cell (<td>) width - I just set the width, and set overflow to hidden. However, I am NOT able to limit table cell height and keep word wrap. If I remove word-wrap, the height stays consistent (nothing forces it, because text just continues horizontally and gets cut off). If I add word-wrap, it seems to ignore the height property and expands the cell vertically.
PLNKR
The goal is to set a fixed table width and height, and then have text wrap (break to next line when reaching horizontal end of cell), but to be cut off vertically when it reaches the bottom. My current styles are these:
<style>
table{
border: 1px solid;
table-layout: fixed;
border-collapse: collapse;
}
tr{
vertical-align: top;
}
td{
word-break:break-all;
width: 80px;
height: 40px;
border: 1px solid;
border-collapse: collapse;
overflow: hidden;
}
</style>
Edit: This is a bonus, but ideally, if an image was placed in a cell, that would get cut off both vertically and horizontally as well, but that's just a "nice to have" and not really part of the q.
Edit 2: Here is an inline-block solution, but it's undesirable, hence not posted as an answer: http://plnkr.co/edit/qvA1wzkEdcrsA2Y9qWdV?p=preview

Figured it out! (Except the answer it a little hokey and only works in CSS3). Using a psuedo after element, and a negative margin, we can trick the table cell into not expanding it's height:
td:after {
content: '';
display: block;
margin-bottom: -10000px;
}
Example plunker: http://plnkr.co/edit/frch27eCDoTBlDEVyUGB?p=preview
Edit:
It seems that -100% will stop the table cell from expanding equal to the height of the table. Thus -100% is not the optimal solution. We'll replace this with a extremely large negative pixel amount. This will fix very long sentences.

I am just posting the "basic"/obvious solution for anyone reading this post later. Put a div inside your table cell, and set width/height to the same size as the cell. Then set the div's overflow and overflow-y to hidden. You shouldn't have any problems with margins/padding/etc, but you can set them to zero if need be.
td{
word-break:break-all;
width: 80px;
height: 40px;
border: 1px solid;
border-collapse: collapse;
overflow: hidden;
background-color:yellow;
}
div{
background-color:cyan;
width: 80px;
height: 40px;
overflow: hidden;
overflow-y: hidden;
}

How to control the Text with more characters(both alphabets and numeric values) in an td?

Is any option to control the text which is in <td>
I am using this css style:
word-wrap: break-word;
width: 200px;
display: block;
Without any text in td it is looking good but when there is a text by using the above css the UI alignment is getting disturbed.
See here in second image the alignment at QR tag td is disturbed completely.
Even if there are more no.of characters are there the alignment shouldnot be disturbed .
please help me out with this issue.

Assuming you only want the row to have a fixed height so that only one line of text to be visible.
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Howto limit the width of a span?

I wonder if it is possible to give a span a maximum width.
I tried using the following css
display: block;
max-width: 300px;
But the width gets ignored when the text content of the SPAN doesn't fit into the span.
I would like to cut the visible part of the span to the defined max-width.
Is this possible?
Any suggestions?

You'll want to use whitespace: nowrap and overflow: hidden on your span to force it all on one line and truncate the text.
JSFiddle
http://jsfiddle.net/JZYWg/

You have to handle the overflow to avoid expanding.
e.g. Adding:
overflow: hidden; or overflow: auto;

Add overflow:hidden to the css of your span. This will make the text cut off
More info

If I use display: inline-block - the span wraps at 300px or you can use overflow: hidden as suggested by others.
See: http://jsfiddle.net/U6R2A/

If the text doesn't fit on the same row don't display all

I have a left sidebar on my website which contains a list with links. If one link is very long, it won't fit on only one row.
For example: 'This is a very long long long link'.
What can I do to display as much as posible from this text (eg. 'This is a very long') but in such a way that it will fit on only one row (one row has 200px width)?

Set the CSS to:
overflow:hidden;
white-space:nowrap;

There is a CSS3 property called text-overflow that controls just what you describe. In combination with overflow: hidden; and white-space: nowrap; you can customize what is displayed at the end of the line.
There's documentation here that's good and describes the property's flexibility. But let's say all you want to do is add an ellipsis (…) to the end of lines that exceed their width, then all you have to write is :
.sidebar p { /*Or whatever selector matches*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Apply overflow: hidden; on the container, along with a set width and height.