I have encountered an issue in my HTML where I set a table column width to 35%. My goal is to display a single line of text within the <td>, with any characters that exceed the column width being cut off. I attempted to use text-overflow:clip, but if the text contains <br> tags, it will show multiple lines.
After testing the suggested solutions, it seems like none of them are working as expected. It appears that the only viable option is to truncate the text before displaying it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div .test").css("background-color","yellow");
$("div .test").css("text-overflow","clip");
$("div .test").css("white-space","nowrap");
$(".test br").css("display", "none");
// $("div .test").css("overflow":"hidden");
});
</script>
</head>
<body>
<table>
<tr>
<td>testing</td>
<td>
<div style="border:1px solid black;padding:10px;">
<p class="test">This is a paragraph.</p>
<span class="test">Skin or subcutaneous tissue or mucous membrane,repair of wound, other than wound closure at time of surgery, on face or neck,more > 7cm.</span>
</div>
</td>
</tr>
</table>
</body>
</html>
Thank you.