I've been working on a forum, and I've made everything work as it, and I tried wrapping to see if it works, basically that part of the code looks like this
before the PHP I got some HTML style:
<style>
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
font-size: 20px;
margin: 0% 8% 0px 8%;
}
</style>
And then after a bunch of MySQL things
echo '<table style="height: 21px;" width="100%">';
while($forumcomrow=mysqli_fetch_array($forumcomres))
{
echo '<tr><td>some text</td><td><pre>Some Very Long Text From Mysql </pre></td></tr></br>';
}
echo '</table>';
I removed everything and just left the style for it and the echo for the table, when I echo just the pre tag, it wraps it at the end of the screen, but as soon as I put it in a table (size doesn't matter, even if I put the width of the table to 5px) it still goes 10 miles off the screen until it starts wrapping.
This is what happens:
On the picture above you can see one part of it, but the text goes off screen about 5x the length you can see on there, and only then starts wrapping
I have figured out what's giving it a problem, it will wrap the text if it has spaces ("aaaa aaa aaa aa aa") but if its one long word ("aaaaaaaaa") it won't wrap it, I don't know how to fix it, I've just figured out whats causing the problem.
It is because of <br> tag at the end, I have faced the same problem some time ago. <br> get applied first for every time and then table gets wrapped.
Remove <br> at the end
echo '<tr><td>some text</td><td><pre>Some Very Long Text From Mysql </pre></td></tr>';
and then it will work perfectly fine.
Related
Right now, I have PHP outputting a list of tags from an SQL database and creating each of them as an <a> tag that looks something like: <a class="tag" href="tags/test-tag" style="background-color:rgb(150,150,255)" title="test tag"> test tag </a> with css:
.tags {
margin-block-start: 0;
margin-block-end: 0;
margin-left: 5px;
overflow: hidden;
font-size: 16px;
display: inline;
margin-top: 2px;
text-overflow: "";
}
As it stands this looks pretty good, but after 3-4 lines (depending on title length) the tags reach the end of the div and keep going, leaving a little bit of the first tag to wrap below visible despite having overflow:hidden on.
Two rows of tags with the third barely visible ("peeking") above the bottom of the div
Is there any way to fully hide any overflowing text? I've changed values around many times to no avail, but I haven't had time to work on this in a while, so I couldn't really say what precisely I've done. Any help would be greatly appreciated.
You can use white-space: nowrap to prevent text from wrapping to the next line and keep it all on one line.
.tag {
white-space: nowrap;
}
This will keep the text from wrapping and any text that exceeds the width of the parent container will be hidden due to the overflow: hidden property.
I have a table of items which has description field. When listing out all items I would like to show exactly three rows of text followed by "..." if the text is longer.
I can do something like
<style>
.box {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
height: 60px;
}
</style>
...which works fine when there is a lot of text and the text is split in several lines. But if I have no new line chars in text I see only one line of text which is shortened.
Also if I have text formated like
Something
//blank-line
//blank-line
I am writing about something, because something is not nothing
I get my three lines...but it looks bad because first line is only "Something", and the two other are blank. So I figured I'd have to pre-format it before I send it from controller to view, and I tried first to approach that problem by removing empty lines and connecting whole text to one line, however this does nothing
$description = preg_replace( "/\r|\n/", "", $array[0]->description);
return $description
Which is maybe excepted since HTML formatted text enters the database
<p class="MsoNormal">Something<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Blah blah...something else...
Does anyone have an idea how to solve this?
Naturally, text will flow to the next line when it reaches the edge of its container element in the browser. I assume your container's width is controlled by some styling (whether fixed or responsive).
So in your case I'd ditch the ellipsis styling, see (from physically looking in the browser) how many characters it takes to produce the 3 lines you desire, and then do (I also assume you don't want to keep the HTML):
$description = strip_tags($array[0]->description);
if (strlen($description) > $maximumLength) {
$description = substr($description, 0, $maximumLength) . "...";
}
return $description
Of course there are other ways to do it on the client side with CSS or JavaScript, but what I see on most sites is they settle on a fixed length for their excerpt and just say any text longer than x characters must be truncated.
I am creating a programming forum and I am having trouble containing the retrieved text from the database. my textarea looks like this
<textarea name = "PostText" style = "width: 90%; height:480px; resize:none; direction: ltr; unicode-bidi: bidi-override;text-align:left;"required>
</textarea>
unicode-bidi: bidi-override captures the code how it is entered but I can not make word-wrap function correctly when using them both. So the first question is how can capture the exact text in the textarea and and display it in a table.
My td tag looks like this
<td style = "margin:0 auto; text-align:left;"><pre>'.htmlspecialchars($post_).'</pre></td>
The pre tag displays the text exactly how it was entered but will not wrap correctly and overflows its container.
How to capture exact text input in textarea and display it in a table?
I'd recommend storing as you store now (just insert to table as is), and when you display the text that you got from database, output it like this:
<td style = "margin:0 auto; text-align:left;">'.nl2br($post_).'</td>
The PHP nl2br function converts line-breaks (that are stored in DB) to new-line HTML tags.
Add overflow with determination of width:
<style>
td pre{
width: 10%;
}
pre{
overflow: auto;
}
</style>
Checkout this DEMO
Currently have a textarea that receives a message and displays it to a user.
However currently when it receives it, if the message is longer than it's border, it keeps displaying the text on one line outside the right hand border.
I would like the text to start on a new line when it reaches the border. How can I do so?
Below is the current code for the text area.
Text area:
echo form_textarea(array('name'=>'name','rows'=>3,'cols'=>100,'wrap'=>'hard','value'=>""));
width: 50px; word-wrap: break-word; should do the trick, of course set your own width
Can you tell me why there's a break after varun09 in the picture below? It's kind of weird because it only happens whenever the statement is bigger than the actual width of the <div>, and I'd like to know how to wrap the text? I want the vertical scroll option, but not the horizontal scrolling bar.
I am populating the <div> with Mysql data through Php.
The code is:
while ($row = mysql_fetch_assoc($query_run)) {
echo '<p>'.$row['user_name'].' '.$row['chat_body'].'</p><br> ';
}
You can use word-wrap property:
selector {
word-wrap: break-word;
}
jsBin demo
use for your element the CSS property word-wrap:
word-wrap: break-word;
You need to set the white-space in order for it to wrap for you, but the space after varun09 will cause the next one to go to the next line. Try this combination:
jsFiddle Demo
p { word-wrap: break-word; white-space:pre; }
Info on white-space here