Alright so for my site I am allowing my users to have a description of themselves or whatever they like, however when I attempt to make breaks using [ENTERKEY] into the <textarea> it looks like this:
Hello, I am John Smith.
Phone#: (123)456-7890
I enjoy web-browsing.
When I return to the page it looks EXACTLY the same (It puts their current description in the edit box). This is what I want. I look in the PHP database and it still looks the same. Again it is what I want. However on the profile page It looks like this
Hello, I am John Smith. Phone#: (123)456-7890 I enjoy web-browsing.
It is contained inside a div with these style tags and like so
<div style="width: 250px; min-height: 50px; margin: auto; font-weight: normal; text-align: center; padding: 2px; margin-bottom: 5px;">
<?php echo $description; ?>
</div>
Im curious why it does this any help would be appreciated :D.
Add white-space:pre-line to your <div> Or, use:
<?= nl2br($description); ?>
Remember that HTML needs <br /> for line breaks, not \n or \r\n (like your <textarea> is collecting). So you can either tell HTML to pay attention to those new lines using white-space, or force the <br /> using nl2br.
When you enter a newline in a textarea, it gets stored as \n, however, HTML does not honor \n linebreaks, which is why everything shows up in a single line when inside a div.
To fix this, you have to convert the \n to <br /> (using nl2br() )which HTML recognizes:
<div style="width: 250px; min-height: 50px; margin: auto; font-weight: normal; text-align: center; padding: 2px; margin-bottom: 5px;">
<?php echo nl2br($description); ?>
</div>
This is because when you take a regular line break and try to render it as HTML, HTML ignore the whitespace character. You need to explictily use <br> (or <br/> depending on DOCTYPE) to create a line break in HTML.
The easiest way to do this in PHP is by using nl2br() function in PHP on output.
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'm not sure what the problem is, but if I type in my textarea while holding down a single key on my keyboard, the output from my database will render as a single line that breaks the formatting of my page. Essentially I just have one long line of text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa that goes off the page and does not have any line breaks.
In other words, if I don't manually type enter to create a line break in my textarea, or if I don't use the spacebar to write something that appears to be a normal sentence, no line breaks will exist even though the textarea pushes the text down a line as I'm typing it.
I've tried this with a vanilla PHP script, filtering none of my content (I've also made sure not to filter anything when rendering the text), and this still happens. Why is this? Is there a way for me to make sure my textarea automatically adds new lines as it pushes text down when typing?
I am not using cols or rows in my HTML, but rather generated the height and width via CSS.
HTML:
<form action="foo.php" method="post">
<textarea id="1"></textarea>
<input id="submit" type="submit" name="submit" value="Comment" />
</form>
CSS:
#1 {
width: 100%;
min-height: 126px;
box-sizing: border-box;
overflow: hidden;
resize: none;
font-size: 15px;
color: black;
margin-bottom: 16px;
padding: 4px 8px;
border: 2px solid #0716a2;
border-radius: 0 0 4px 4px;
}
It may also be helpful to mention that this occurs when copy and pasting text that isn't formatted (i.e. not from a site like this). My textarea should be able to accommodate multiple paragraphs.
Sounds to me like the text is simply being rendered quite normally.
Check out the following bits of HTML that have the following CSS:
div {
border: 1px solid red;
width: 400px;
}
This bit of HTML:
<div>
aaaaaa
</div>
Renders:
However, this:
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
Renders this:
But, this:
<div>
aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa
</div>
Renders this:
It's quite standard. However, if you want to fix this, you can add the following style:
overflow-wrap: break-word;
And this will cause the long words to break up, like so (with some extra filler text to show how it doesn't break the other words unnecessarily):
I hope that helps.
I have been trying to get all file resources inside an HTML.
My current version of the regex is
"[^']*'([^"]*)'[^']*" | "([^"]*)"
An example HTML (only a part):
<div style="background-image: url('/courses/UMASGRUPOBDEMO/document/learning_path/El_Contrato_de_Seguro-_Contenido_Teorico/video_pres_cto_seguro.jpg');display: block; margin-left: auto; margin-right: auto;"></div>
<img class="maximize"
src="/courses/CURSODESTINOPEQUENO/document/learning_path/LECCION_1_2_3_4_5_-_corta/Diapositiva01-29332.jpg" style="display: block; margin-left: auto; margin-right: auto;" />
Iterating preg_match I can get:
/courses/UMASGRUPOBDEMO/document/learning_path/El_Contrato_de_Seguro-_Contenido_Teorico/video_pres_cto_seguro.jpg
maximize
/courses/CURSODESTINOPEQUENO/document/learning_path/LECCION_1_2_3_4_5_-_corta/Diapositiva01-29332.jpg
But preg_match_all only give me the next one:
/courses/UMASGRUPOBDEMO/document/learning_path/El_Contrato_de_Seguro-_Contenido_Teorico/video_pres_cto_seguro.jpg
You can live test it at http://www.phpliveregex.com/p/h6T
Does this have any sense? Probably my regex needs something to work.
I have not much experience with regex. Please help me :)
Thanks you in advance!
Added:
The regex actually is something like:
any string delimited by double quotes which contains any string without double quotes and also contains two quotes inside with an optional content in between them
OR two double quotes with optional content inside (without double quotes)
As I am seeing, maybe the no quotes and no double quotes conditions should be touched a little to have better regex...
Now using a longer HTML example: http://www.phpliveregex.com/p/h74
<p><img class="maximize" src="/courses/UMASGRUPOBDEMO/document/learning_path/Diapositiva54/Diapositiva2.jpg" style="display: block; margin-left: auto; margin-right: auto;" alt="" /></p>
<div style="background-image: url('/courses/UMASGRUPOBDEMO/document/learning_path/El_Contrato_de_Seguro-_Contenido_Teorico/video_pres_cto_seguro.jpg');display: block; margin-left: auto; margin-right: auto;"></div>
<img class="maximize"
src="/courses/CURSODESTINOPEQUENO/document/learning_path/LECCION_1_2_3_4_5_-_corta/Diapositiva01-29332.jpg" style="display: block; margin-left: auto; margin-right: auto;" />
Try this regex instead:
"[^"']*'([^"']*)'[^"']*"|"([^"]*)"
Your original regex was greedily picking up everything from after the second ' to the last " in the input.
Remember that the * and + operators in regex are greedy meaning they will consume as much as possible in order to match.
You either must limit what those operators are applied to (as I did above) or turn them into non-greedy operators for the regex systems that support it, by using *? or +?:
"[^']*?'[^"]*?'[^']*?"
(However, this last one will still have issues, for example with <img src="foo" alt='bar' class="myimage" /> - which will grab 'bar' even though it's not part of a "-delimited string)
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
When I include some PHP in my page to populate a load of HTML everything is preceeded with the characters . It's probably something daft but it's driving me nuts. I'm a newcomer to PHP so kid gloves please.
This is my include statement <?php $PSName="Solar Numbers"; $whereto="bot"; include("../php/menu.inc.php");?>
and this is the code that's doing the damage
print <<<END
<a href="$pgurl">
<div id="layer1" style="background: url('$picurl');
position: absolute; width: 150px; height: 41px; z-index: 1; color: #FFFFFF; font: caption;
left: 14px; top: $topstr;
font-family: Arial, Helvetica, sans-serif; font-weight: bolder; text-decoration: none;
text-transform: capitalize; text-align: center; vertical-align: middle; font-size: xx-small;">
<br>
<font size="+0">$pgnm</font>
</div>
</a>
END;
it's output several times in a loop in the program and it's only the first time round I get the spurious characters.
Help please
SteveK
Save the file as UTF-8 without the signature (BOM).
Those characters are the Unicode code point U+FEFF which is needed for UCS-2, UCS-4, UTF-16 and UTF-32 to indicate the byte order (little- or big-endian) – the code point itself is a zero-width no-break space. That means any application not stripping it won't run into problems as long as it supports Unicode output. However, if your PHP file begins with it (in UTF-8), PHP is not smart enough to do anything with it and since it's page content as far as PHP is concerned, it will get printed. This also means that you can't do a redirect or set cookies or start a session if this happens as PHP already sent part of the page output.
The characters look like UTF-8 BOM characters.
If you use Dreamweaver, the preselected option for "source file creation" is:
use utf8 BOM [x]
deselect it and create a file (menu.inc.php) without the BOM (byte order mark).
Regards
rbo
Reeeeeeeeeally late I know, but this little piece of HTML got rid of it no trouble:
<meta charset="utf-8" />
Hope it helps someone :)