Sunday 15 August 2010

html - Align Text to Bottom and Enforcing Overflow Hidden -


I have to put a text box of fixed height where the text is aligning below if the text is greater than the height of the box, the text Will not be visible. My problem is now that overflow: is hidden; Do not hide additional text I think this display: table-cell; is due to. If I display: table-cell; overflow: hidden; works, then vertical-align: bottom; will not work. P>

Edit: If the text is too long, the text does not need to be expanded up until it reaches 40px. When it reaches 40px, additional text overflow: hidden .

  div {background: yellow; Height: 40px; Width: 250px; Exhibit: Table-Cell; Vertical-alignment: bottom; Hidden flurry; } & Lt; Div & gt; & Lt; A href = "#" & gt; A short link with my text & lt; / A & gt; & Lt; / Div & gt; & Lt; Br> & Lt; Div & gt; & Lt; A href = "#" & gt; A lot ... very long links with my text & lt; / A & gt; & Lt; / Div & gt;    

HTML

  & lt; Div class = "out" & gt; & Lt; Div class = "insideside" & gt; & Lt; A href = "#" & gt; A short link with my text & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Br> & Lt; Div class = "out" & gt; & Lt; Div class = "insideside" & gt; & Lt; A href = "#" & gt; My text and lieutenant; / A & gt; Very very very very very very very very very link with; & Lt; / Div & gt; & Lt; / Div & gt;   

In CSS

  .outout {background: yellow; Height: 40px; Width: 250px; Hidden flurry; }. Geneside {height: 40px; Exhibit: Table-Cell; Vertical-alignment: bottom; }   

Hope this will help you ...


You can do the same thing without editing the HTML code < P> HTML: the same HTML code

CSS: like this

  div {background: yellow; Height: 40px; Width: 250px; Hidden flurry; } A {display: table-cell; Height: 40px; Vertical-alignment: bottom; }   

Perhaps this will solve your problem ...

No comments:

Post a Comment