CODEWITHSUNDEEP
htmlcsshtml-tablecrop
Steven
Steven

Reputation: 1262

Crop Text in a td CSS

I'm active on a side called My Anime List. It's for tracking your Anime.
On this site you can upload a custom CSS Design für your List I already achieved the design I want, but I want to improve it little by little so my first problem occurred.

I want to to crop the Animes Names, to fit everything in one row.

How can I crop it? All I know its sth about the table layout, I already made it fixed, but now I don't know how to proceed.

.table {
     table-layout: fixed; 
     width: 100%;
}

I tried to edit the td1, td2, but I think I need to change the inside the td to achive what I want, but all I tried did nothing.

My List, for examples see #51,#58 in Completed

Thanks for helping me, sorry for my bad english and if you need other informations I'll try to provide it to you.

solution (worked for me)

td.td2 span, td.td1 span { 
    display:block;
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
.td1, .td2 {
    background-color: #FFF;
    border-color: #F2F2F2;
    border-style: solid;
    border-width: 0 0 1px !important;
    max-width: 416px;
}

Upvotes: 1

Views: 3273

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

you may need text-overflow and turn span as a box :

td.td2 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
table {
  width:100%;
  }
<table>
    <tr>
        <td class="td2" style="border-left-width: 1px;" align="center" width="30">28</td>
        <td class="td2" style="border-left-width: 0">
            <div style="float: right;">	
              <small>
		       <a href="/panel.php?go=add&amp;selected_series_id=27899&amp;hidenav=true" class="List_LightBox">Add</a> - 
		       <a href="javascript:void(0);" id="xmenu27899" onclick="getExpand(27899,2);" title="View More Information">More</a>
		</small>

            </div> 
          <small  style="float: right;margin:0.25em;">Airing</small> 
          <a href="/anime/27899/Tokyo_Ghoul_√A" target="_blank" class="animetitle" title="Anime Information"><span>Tokyo Ghoul √A</span></a> 
        </td>
        <td class="td2" align="center" width="45">5</td>
        <td class="td2" align="center" width="50">TV</td>
        <td class="td2" align="center" width="70">8/12</td>
        <td class="td2" align="left" width="125">	<span id="tagLinks27899"><a href="/animelist/ErgoCanis&amp;tag=Studio Pierrot&amp;status=7">Studio Pierrot</a></span>
	<span id="tagRow27899" style="display: none;">Studio Pierrot</span>
        </td>
        <td class="td2" align="center" nowrap="" width="75"><span title=""> &nbsp; </span>
        </td>
    </tr>
</table>

Upvotes: 5

user4613590
user4613590

Reputation: 

td.td2 span { 
   display:block; 
    white-space:nowrap; 
    overflow:hidden; 
}

Upvotes: 1

jswebb
jswebb

Reputation: 537

Without seeing more of the code, I can only venture a guess as to what you want - you could try setting a height and max width for your <td> and using

overflow:hidden;
white-space: nowrap;

See Fiddle Here

EDIT: GCyrillus added text-overflow:ellipsis; to the solution, and I hadn't even thought of it - it's a good way to make the text look neater. Updated Fiddle.

Upvotes: 4

Related Questions