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
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'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.
There's a simple way to include when there's a new line in the database (nl2br), but is there anything similar for tabs?
I've tried different solutions which works in the way of the look, but not when you're copying the code. I've tried a CSS style and made it like:
#br{
margin-right: 30px;
float: left;
}
But once I copy the code, there's no tab. In my database there's a TAB, but how do I print the tab?
You can use a bit of CSS to display tabs as tabs.
#br {
white-space: pre-wrap;
tab-size: 4;
}
pre-wrap is the best solution, I think, because it still allows the text to wrap normally when a line is full. pre is also possible, but then the text won't break at the end of a line.
tab-size is optional. By default it is set to 8 spaces, but you can change that by specifying a number of spaces in this property.
Note that I've copied your CSS selector, #br, but normally I would make a class for this, so you can easily apply this style to any number of elements in your page.
Also note, since pre-wrap also displays line breaks as actual breaks, you probably won't need to call nl2br on the server anymore.
You can write a function like nl2br(). Something like:
<?php
function tab2span($str){
if(strpos($str, "\t"){
$str = str_replace('\t','<span class="tabbed"> </span>',$str);
}
return $str;
}
?>
Then you can also adjust your CSS to style it better if you need.
I am using php to output and exerpt inside a p tag.
I am then wrapping the inside string of the p tag with a span.
<p class="lead"><span><?php the_advanced_excerpt(); ?></span></p>
The outputted html...
<p class="lead"><span>Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular…</span></p>
The span then has this css on it...
.carousel-caption .lead span {
background: #F60;
padding: 5px;
}
Please see the out come here...
See the green arrows - where it looks as desired.
See the red arrows - where padding is missing.
As you can see the orange high lighted lines are flush at the end of each line. Apart from the beginning and the end of the string.
So my question is how can I add left/right padding to each of the lines?
So it appears that each line has been highlighted with a background colour. Like plastic tape that you get embossed letters on.
Is this posible somehow?
Add "display: block" or "display:inline-block" to span's class
Unfortunately I do not think it is possible, and this is why:
span is always inline like this, so padding adds an extra 5px on the top, bottom, left, and right. Now your middle lines are not the beginning or the end because they are one line, so padding does not read for them.
You can set a background with display:block but you want a "highlighted" effect, which is not what display:block will give
I have a DIV container I'm using as a comment box. I want to make sure that text doesn't overflow the DIV container, and instead will wrap a long word. What's the easiest way to do this with CSS and PHP?
apply the below class to div
.break-word {
word-wrap: break-word;
}
define white-space:normal; as css property to div to fit text in box and to break word is word-wrap:break-word;