Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Justin Cedroni
Justin Cedroni
5,526 Points

Using <span> to hide portions of words

I'm currently building a website and I want to include a table. The issue is that when I re-size the browser all of the data flows downward when the text wraps. As a workaround I decided to include <span> tags in my long words to make them shorter when the screen gets below a certain size. i.e. min<span class="hide">utes</span>

This seems to give me the result I want (at this point anyway). My question concerns the use of <span> here. Is this semantically allowed/relevant or am I just hacking away?

This is my first attempt at making a site, so any input is welcome.

Here's part of my code to help make things clearer.

<div id="wrapper">
      <div id="tuition">
        <h2>Tuition Rates</h2>
        <table id="price-table">
          <thead>
            <tr>
              <th class="th-type">Lesson Type</th>
              <th class="th-length">Lesson Length</th>
              <th class="th-cost">Normal Rate</th>
              <th class="th-rate">Prepay Rate</th>
              <th class="th-discount">&#37; Disc<span class="hide">ount</span></th>
            </tr>
          </thead>
          <tbody>
            <tr class="top-row">
              <td rowspan="3">Music Lessons</td>
              <td>30 min<span class="hide">utes</span></td>
              <td>&#36;30</td>
              <td>&#36;27</td>
              <td>10&#37;</td>
            </tr>
            <tr>
              <td>45 min<span class="hide">utes</td>
              <td>&#36;45</td>
              <td>&#36;40</td>
              <td>12.5&#37;</td>
            </tr>
            <tr>
              <td>60 min<span class="hide">utes</td>
              <td>&#36;60</td>
              <td>&#36;51</td>
              <td>15&#37;</td>
            </tr>
      </div>
</div>

2 Answers

harsha praneeth
harsha praneeth
5,449 Points
harsha praneeth
harsha praneeth
5,449 Points

i think u are doing a right thing in my opinion, from my point of view. i think instead of using span every were why cant u try using <td class="hide"> and i think it might do the job for u and use >, ~ these operators. I am giving my first suggestion here dont mind if its wromg

Tong Vang
Tong Vang
9,926 Points
Tong Vang
Tong Vang
9,926 Points

I think you are trying this. The value below will truncate the line and add three "..." to let the reader knows there is more.

text-overflow:ellipsis