HTML: кесте азая бастағанда, мәтінді толып тастау көбірек мәтінді қиып тастауы керек

Менде ASP.NET басқару элементімен жасалынған HTML кестесі бар веб-бет бар. Кестенің жоғарғы жолында құралдар тақтасын эмуляциялайды. Бұл жоғарғы қатар келесідей:

<tr>
  <td style="white-space:nowrap;">
    Very long title 
  </td>
  <td>
    { bunch of hyperlinks with background images, emulating a toolbar }
  </td>
</tr>

Мен бұл кесте болып табылатындығымен тығыз байланыстамын, ал тақырыптық аймақтың мазмұны ұзындыққа қойылады және, мүмкін, орамсыз стильде орамалмайды.

Бұл кесте бет тарылып кеткен кезде тарылуға тиіс және бұл өте жақсы. Алайда, нақты тақырып мәтіні (егер өзгеруі мүмкін) тым ұзын болса, ол кестедегі басқа нәрселермен қатарласып кетуіне әкеліп соқтыруы мүмкін кестенің қаншалықты тарылуына шектеу ретінде қызмет етеді. (IE8, BTW пайдаланамын.)

overflow: hidden , text overflow: ellipsis және display: inline-block қолданылуын тексеріп, ені үшін кесте ұяшығына, барлық стильдер кестесі арқылы. inline-block - менің таңдауым болғандықтан, Display: block - жолдың биіктігін екі есеге арттырды). Тақырып мәтіні қысқартылған, Мен қалағандай. Бірақ кесте ешқандай тар болмайды.

IEDT арқылы құндылықтар мен стильдерді өзгерткеннен кейін, мен үстелдің қаншалықты тар болатындығын анықтағанда, мәтін әлі де толық ұзындық деп саналды. Ауқым салыстырмалы түрде қысқа болды, тек қана пайда болған мәтін пайда болды, бірақ table-cell ендік мақсаттары үшін мәтін бәрібір болды.

Мен бұл құбылысты кез-келген жерде құжаттаған жоқпын, бірақ мен жеткілікті емес. :) Егер text overflow маған көмектесе алмаса, менің ойымша, сценарий арқылы тақырыпты динамикалық түрде қысқартуға тура келеді. CSS арқылы ғана қалағанымды істеудің жолы бар ма?

3

2 жауаптар

Кестедегі ұяшықтарды көрсету әрекеті блоктардың әдеттегі әрекеттерінен ерекшеленеді. Оны әдеттегідей ету үшін, кесте кестесінің орналасу сипатын алдымен «тіркелген» күйіне өзгерту керек және кесте енін орнатыңыз:

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

Бұл ұяшықтың автоматты түрде автоматты түрде өлшеуін өшіреді. Содан кейін әдеттегідей td енін және толып кетуін орнатуға болады.

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

Here is example: http://jsfiddle.net/vS3qq/1/

6
қосылды
Рақмет сізге! Бұл өте жақсы шешілді!
қосылды автор Ann L., көзі

Менің ойымша, бұл сіз іздеген нәрсе. Алдымен style = «white-space: nowrap;» -тен құтылыңыз.

Next change your to a <div> a style like this:

<div style="height 18px;overflow:hidden;">

the height value will have to be adjusted to your line height, but this should work.

0
қосылды
Көп рақмет.
қосылды автор Ann L., көзі