Tekst in een tabel af laten breken ipv 2 regels

Pagina: 1
Acties:

  • Emielio
  • Registratie: December 2004
  • Laatst online: 26-11 14:26
Laat ik allereerst zeggen dat ik echt moeite heb gedaan om uit te vinden waar deze vraag het beste past, bij "Webdesign, Markup & Clientside Scripting" of bij "Programming". De vraag gaat over een deel in een php file maar ik denk dat dat deel zelf niks met php te maken heeft en daarom plaats ik het hier.

Ik ben bezig en (phpbb)forum van me uit te breiden met een portal functie. Als portal gebruik ik mkportal. In de portal heb ik een zogenaamd "block" waarin de laatste forum berichten staan. Dit block is hier linksboven te zien: Testforum

Nu kwam ik er pas achter dat als je de portal op een hele kleine monitor bekijkt (1024*768), dat dan lange topic namen 2 regels worden. Het probleem is dan dat het block er niet meer uit ziet. En ik heb toch hier en daar gezien dat mensen deze resolutie toch nog dagelijks gebruiken, dus hiet moet het er ook gewoon goed uit zien.

Nu wil ik dus op 1 of andere manier zorgen dat een onderwerp als "weerstand tegen branddoorslag en brandoverslag tussen gebruiksfuncties" bij een te kleine ruimte word: "weerstand tegen branddoorslag en brandoverslag..." zodat alles gewoon op 1 regel past.

Ik zal even de code van het block hier neer pasten:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<?php 

// Amount of active topics to show 
define("TOPIC_COUNT", 8); 

// Path to the phpBB 2.0 root directory 
define("PHPBB_PATH", "/home/sites/webhosting/bureauvanrossum/brandpreventieforum/testforum/forum/"); 

// URL to the phpBB 2.0 installation 
define("PHPBB_LOCATION", "http://testforum.brandpreventieforum.nl/forum/"); 

// Time format to output the date/time (for format see PHP manual) 
define("TIME_FORMAT", "d/m/Y"); 

// Includes of phpBB scripts 
$phpbb_root_path = PHPBB_PATH; 
if ( !defined('IN_PHPBB') ) 
{ 
  define('IN_PHPBB', true); 
  include(PHPBB_PATH . 'extension.inc'); 
  include(PHPBB_PATH . 'config.'.$phpEx); 
  include(PHPBB_PATH . 'includes/constants.'.$phpEx); 
  include(PHPBB_PATH . 'includes/functions.'.$phpEx);
  include(PHPBB_PATH . 'includes/db.'.$phpEx); 

} 

// HTML header start 

?> 
<style>
a:link, 
a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #006699; 
    text-decoration: none;
    font-size: 13px;    
}

a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #006699; 
    text-decoration: underline;
    font-size: 13px;
}

a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #006699; 
    text-decoration: none; 
    font-size: 13px;
}
</style>
<table border="0" cellpadding="2" cellspacing="1" width="100%"> 
<tr> 
<th align="center" bgcolor="#dee3e7"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="2">Onderwerp</font></th> 
<th align="center" bgcolor="#dee3e7"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="2">Bekeken</font></th> 
<th align="center" bgcolor="#dee3e7"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="2">Antwoorden</font></th> 
<th align="center" bgcolor="#dee3e7"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="2">Laatste reactie door</font></th> 
<th align="center" bgcolor="#dee3e7"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="2">Datum</font></th> 
</tr> 
<?php 

// www.phpBB-SEO.com SEO TOOLKIT BEGIN
if (!isset($orig_word)) {
   // Define censored word matches
   $orig_word = array();
   $replacement_word = array();
   obtain_word_list($orig_word, $replacement_word);
}
if (!is_object($phpbb_seo)) {
   include(PHPBB_PATH . 'phpbb_seo/phpbb_seo_class.'.$phpEx);
   $phpbb_seo = new phpbb_seo();
}
// www.phpBB-SEO.com SEO TOOLKIT END 


// HTML header end 

$sql = "SELECT DISTINCT t.topic_title, t.topic_id,t.topic_views,t.topic_replies, t.topic_last_post_id, p.post_time,p.poster_id, f.forum_name, u.user_id, u.username 
FROM " . TOPICS_TABLE . " AS t, " . POSTS_TABLE . " AS p, " . FORUMS_TABLE . " AS f, " . USERS_TABLE . " AS u 
WHERE 
t.forum_id = f.forum_id 
AND f.auth_view = " . AUTH_ALL . " 
AND p.topic_id = t.topic_id 
AND p.poster_id = u.user_id 
AND p.post_id = t.topic_last_post_id 
ORDER BY p.post_time DESC LIMIT " . TOPIC_COUNT; 
$nt_result = $db->sql_query($sql); 

if(!$nt_result) 
{ 
die("Failed obtaining list of active topics".mysql_error()); 
} 
else 
{ 
$nt_data = $db->sql_fetchrowset(); 
} 
if ( count($nt_data) == 0 ) 
{ 
die("No topics found"); 
} 
else 
{ 
$cq = 1; 
$cc = FFFFFF; 
// $nt_data contains all interesting data 
for ($i = 0; $i < count($nt_data); $i++) 
{ 
// www.phpBB-SEO.com SEO TOOLKIT BEGIN
$title = ( count($orig_word) ) ? preg_replace($orig_word, $replacement_word, $nt_data[$i]['topic_title']) : $nt_data[$i]['topic_title'];
if (!isset($phpbb_seo->seo_url['topic'][$nt_data[$i]['topic_id']])) {
   $phpbb_seo->seo_url['topic'][$nt_data[$i]['topic_id']] = $phpbb_seo->format_url($title);
}
$Turl = PHPBB_LOCATION . $phpbb_seo->seo_url['topic'][$nt_data[$i]['topic_id']] . $phpbb_seo->seo_delim['topic'] . $nt_data[$i]['topic_id'] . $phpbb_seo->seo_ext['topic'];
$LPurl = PHPBB_LOCATION . $phpbb_seo->seo_static['post'] . $nt_data[$i]['topic_last_post_id'] . $phpbb_seo->seo_ext['topic'] . "#" . $nt_data[$i]['topic_last_post_id'];
$on_forum = 'Forum ' . $nt_data[$i]['forum_name'];
$post_time = date(TIME_FORMAT, $nt_data[$i]['post_time']);
//Profile profile.php?mode=viewprofile&u=23
$profile = PHPBB_LOCATION . $phpbb_seo->seo_static['user'] . $nt_data[$i]['poster_id'] . $phpbb_seo->seo_ext['user'];
// www.phpBB-SEO.com SEO TOOLKIT END

$usrname = $nt_data[$i]['username']; 
// Item HTML start 
if($cq%2 == 0){$cc = dee3e7;$cq++;} else{$cc = efefef;$cq++;}?> 
<tr> 
<td bgcolor="#<?php echo $cc;?>" align="left"><a href="<?php echo $LPurl; ?>" title="<?php echo $on_forum; ?>" target="_parent"><font size="2" face="verdana" color="#006699" ><B><?php echo $title; ?></B></font></a></td> 
<td bgcolor="#<?php echo $cc;?>" align="left"><div align="center"><font  size="2" face="verdana" color="#000000" size="1"><?php echo $nt_data[$i]['topic_views'] ?></div></td> 
<td bgcolor="#<?php echo $cc;?>" align="left"><font face="verdana" color="#000000" size="2"><div align="center"><?php echo $nt_data[$i]['topic_replies'] ?></div></td> 
<td align="center" bgcolor="#<?php echo $cc;?>" align="left"><font  size="2" face="verdana" color="#000000" ><a href="<?php echo $profile; ?>" target="_parent"><font face="verdana" color="#006699" size="2"><B><?php echo $usrname?></B></a></td>
<td bgcolor="#<?php echo $cc;?>" align="left"><font face="verdana" color="#000000" size="2"><div align="center"><?php echo $post_time ?></div></td> 
</tr> 
<?php 
// Item HTML end 
} 
} 
// Footer HTML start 
?> 
</table>


Zou iemand weten hoe ik zoiets af kan laten breken??

Opleiding Brandveiligheid


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 12:12

crisp

Devver

Pixelated

Daar is text-overflow: ellipsis voor bedoelt, maar de browser-ondersteuning daarvan is zeer matig (lees: alleen IE, Opera ondersteund het dmv een propriety property -o-text-overflow: ellipsis;)

Voor Firefox zal je dan of met javascript aan de slag moeten of een manier verzinnen om serverside te bepalen waar je af moet breken (lastig en geen goede scheiding tussen je content en opmaak).

[ Voor 33% gewijzigd door crisp op 04-03-2007 11:18 ]

Intentionally left blank


  • Emielio
  • Registratie: December 2004
  • Laatst online: 26-11 14:26
crisp schreef op zondag 04 maart 2007 @ 11:17:
Daar is text-overflow: ellipsis voor bedoelt, maar de browser-ondersteuning daarvan is zeer matig (lees: alleen IE, Opera ondersteund het dmv een propriety property -o-text-overflow: ellipsis;)

Voor Firefox zal je dan of met javascript aan de slag moeten of een manier verzinnen om serverside te bepalen waar je af moet breken (lastig en geen goede scheiding tussen je content en opmaak).
Er is dus geen simpele manier om dit op te lossen?

Opleiding Brandveiligheid


Verwijderd

lijkt me handiger om gewoon dat block mee te laten schalen met de tabel, dan kunnen mensen iig alle tekst nog gewoon lezen. Wat is daar op tegen?

  • Emielio
  • Registratie: December 2004
  • Laatst online: 26-11 14:26
Verwijderd schreef op zondag 04 maart 2007 @ 12:12:
lijkt me handiger om gewoon dat block mee te laten schalen met de tabel, dan kunnen mensen iig alle tekst nog gewoon lezen. Wat is daar op tegen?
Opzich is dat een optie, maar mooi vind ik het niet.

Opleiding Brandveiligheid


  • Emielio
  • Registratie: December 2004
  • Laatst online: 26-11 14:26
Ik zie trouwens dat ze het op de tweakers frontpage wel afbreken met ... er achter. Dus opzich moet het echt kunnen.

Opleiding Brandveiligheid


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 12:12

crisp

Devver

Pixelated

Emielio schreef op zondag 04 maart 2007 @ 12:31:
Ik zie trouwens dat ze het op de tweakers frontpage wel afbreken met ... er achter. Dus opzich moet het echt kunnen.
Dat wordt serverside gedaan op een nogal ranzige manier. Ik ben momenteel aan het experimenteren met een javascript-methode maar de performance laat nogal te wensen over bij complexe markup.

Intentionally left blank


  • Emielio
  • Registratie: December 2004
  • Laatst online: 26-11 14:26
Ik heb de makkelijke uitweg genomen door het vakje weg te halen waar je zag hoevaak een topic bekeken was. Is ook niet bijster relevante informatie

Opleiding Brandveiligheid


  • djluc
  • Registratie: Oktober 2002
  • Laatst online: 30-11 12:28
crisp schreef op zondag 04 maart 2007 @ 12:38:
[...]
Dat wordt serverside gedaan op een nogal ranzige manier. Ik ben momenteel aan het experimenteren met een javascript-methode maar de performance laat nogal te wensen over bij complexe markup.
Het is wel een hele mooie manier inderdaad. Je zou o.a. kunnen kijken of de hoogte van de rij > standaard en dan steeds een teken weghalen tot deze normaal is.

Misschien zou je het na de pageload kunnen doen. Dus eerst een overflow: hidden met een nowrap en dan daarna de berekening uitvoeren. Dan zie je de titels inschuiven zonder dat de pagina verspringt.

Verwijderd

Ik gebruik op m'n eigen site de volgende techniek om tabelcel tekst op één lijn te houden:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<tr>
  <td>
    <div>Lorem ipsum dolor sit amet</div>
  </td>
  <td>
    <div>consectetur adipisicing</div>
  </td>
  <td>
    <div>elit, sed do eiusmod</div>
  </td>
  <td>
    <div>tempor incididunt ut labore</div>
  </td>
</tr>

Cascading Stylesheet:
1
2
3
4
5
td div {
  line-height:1.5em;
  height:1.5em;
  overflow:hidden;
}

In feite een heel simpel truukje en vast niet naar iedereens smaak :) Wat er gebeurt is dat de tekst wordt afgebroken naar de volgende regel maar de container (div) altijd maximaal een regel hoog is. Tekst wordt op woordnivo afgebroken maar er komen geen ellipsis achter. Misschien dat ik daar later nog iets op verzien.
Pagina: 1