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

<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?

---

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. :-)

---

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)

---

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.

---

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