How to implement 2 rows and width to fit in the column in web development?

Question

<td style="width:230px;overflow:hidden;">
<?php echo $something; ?>
</td>

What I'm doing is to cut $something to 2 rows at most,and add ... when necessary,

but this kind of requirement seems clue less when trying to implement,

Solutions within the scope of php/javascript/css are appreciated!

anyone has ideas?

This will be rather difficult to accomplish, given that the number of rows of text displayed is not entirely under your control (recall that the user can change the font size, which can change the number of lines of text). You may want to consider limiting `$something` by sentence length or some other criterion, instead. — eykanal, Jun 02 '10 at 04:01

score 1 · Answer 1 · answered Jun 02 '10 at 04:26

As eykanal stated, you cannot accurately predict the user's custom settings. About the only thing you can do is to take a measurement of an element that has two rows of text (place a small amount of text inside a[n off-screen] div element with no padding, and measure the height), and set overflow to hidden.

There are a few tricks you could do to get the ellipsis, but none that I would absolutely recommend. You could absolute position a div inside the parent element (with a relative positioning) and set it to bottom: 0, right: 0, with the same background color as the parent, thus covering up the last bit of text in the element.

<style type="text/css">
#parent {
  position:relative;
  overflow: hidden;
  width: 230px;
  height: auto;
  background: #f1f1f1;
}
.ellipsis {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}
</style>

<div id="parent">
  This would be the text that was inserted by the PHP code you mentioned above
  <div class="ellipsis">...</div>
</div>

Then for the Javascript to get the height, take this as pseudocode...

<script type="text/javascript">
window.onload = function() {
  var textDiv = document.createElement('div');
  textDiv.style = 'padding:0;position:absolute;left:-500px;top:-500px;';
  textDiv.innerHTML = 'Getting<br>Height';
  document.body.appendChild(textDiv);

  var textHeight = (textDiv.offsetHeight || textDiv.clientHeight);
  document.body.removeChild(textDiv);

  document.getElementById('parent').style.height = textHeight;
}
</script>

Of course if you are using a Javascript framework (Mootools, jQuery) you can modify how you create an element, and set attributes, but that should, for the most part achieve something very close to what you are looking for, with minimal tinkering.

You would also want to set the height of all elements with the ellipsis class to half the height retrieved from the javascript.

That's about all I got, man. Hope it helps. :-)

score 0 · Answer 2 · answered Jun 02 '10 at 04:09

0

I'm not sure of php's string methods but you can check for a truncate method. try to look for a max number of characters for your table cell then using that call $something.truncate($max_num_of_table_cell)

answered Jun 02 '10 at 04:09

corroded

21,406
19
83
132

But how exact do you need to be? Suppose you truncate a character or two too early, how bacd would that be? To do this precisely is going to be tough, to do it approximately like this may be the most cost-effective approach – djna Jun 02 '10 at 04:24

score 0 · Answer 3 · answered Jun 02 '10 at 04:10

0

I think you are in text long problem. For that, Use wordwrap function,

Example for manual :

<?php
$text = "A very long woooooooooooord.";
$newtext = wordwrap($text, 8, "\n", 1);

echo "$newtext\n";
?>

Output :

     1. A very
        long
        wooooooo
        ooooord.

answered Jun 02 '10 at 04:10

Karthik

3,221
5
28
38

This tip is cool,but how to determin how many characters can fit in a row programmatically? – wamp Jun 02 '10 at 04:11

score 0 · Answer 4 · edited May 23 '17 at 12:11

I think you need to do this in JavaScript, because you are dependent upon the final rendering in the browser, the CSS that is in use etc.

This question discusses how to find the length of a string when it's displayed. You know the width of your column, so I suppose you can figure out the number of characters from the text taht will fill two rows.

Or approximate, compute the number of the widest character that will fit MMMMMMM and just take that many characters.

Or, in a hidden window, create a suitably sized table, keep adding characters to it until the row height gets too big

How to implement 2 rows and width to fit in the column in web development?

4 Answers4