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.
Related
To keep my table readable I would like to slice the variable name on mobile screens to 15 characters. How can I execute the code below so that it only shows on small screensizes?
{{airline.name |length > 15 ? airline.name|slice(0, 15) ~ '...' :airline.name }}
A server-side rendering engine like twig doesn't have access to a browser's size of the viewport.
The best-practice solution for cutting strings and attaching dots on lower screen-sizes is the CSS property text-overflow in combination with CSS media queries.
A pure CSS solution that cuts the text inside .element if the text doesn't fit into the element and adds 3 dots instead of automatically wrapping it to the next line(s) would look as follows:
.element {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.element {
overflow: visible;
white-space: normal;
text-overflow: none;
}
}
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.
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
I have a page which is a cms/wysiwyg/ms word nightmare.
It pulls many paragraphs of text from a database, some of which have retained ms word's bizarre html tags - including font declarations!!! ahh!
In one sentence I can have things like:
<span style="font-family:Verdana">this is some</span>
<span style="font-family:arial">ugly text!</span>
I was wondering if there is a way of removing all font-family and font-size styles so they will adapt the master stylesheet css?
I'd prefer to not get into massive preg_replace conditions if I can avoid it.
Thanks
CSS:
span {
font-family: initial !important;
font-size: initial !important;
}
Well, if you're getting inline styles in many places, I would add this to the body CSS
body {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
}
If you notice that all of the inline font styling are going on spans, you could target spans instead of the body.
I chose these two fonts because they are the "default" fonts for Windows and Mac/iOS.
Of course you can choose your own font size. The only unfortunate part about this is if you want a different font and font size in other places you'll have to use more !importants.
You can use the !important rule for this. But you will have to explicitly define each element you want it to go on (or use the universal selector *)
http://jsfiddle.net/b8RKm/
* { font-family: Tahoma, sans-serif !important; }
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.