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.
Related
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 parsing some articles from a database with php and in the articles there are links which I would like to overwrite. Link always start with "http://cdn.example.com/" and the end parser is htmlspecialchars_decode($item->parse_articles(), ENT_NOQUOTES).
So before the articles are passed to the HTML DOM, I would like to replace all those href's that contain (?) example.com or maybe even if faster and possible to remove the <a> completely.
.
How is this possible? and if possible, is this considered faster option than passing it first to the DOM and manipulating it from there on the client-side?
You could try something like the following in PHP:
$newtext = preg_replace('/^("http:\/\/cdn\.example\.com\/){1}(.*)("){1}$/', '"#" class="disabled-link"', $oldtext);
$oldtext being your input article as a string.
$newtext being the text to echo on the page.
Broken down:
Find text starting with "http://cdn.example.com/
Then match anything
Stop at "
Replace with "#" class="disabled-link"
This should let you remove the link and also I added the class part so that you can add some CSS to style the links as text.
Example:
.disabled-link{
color:#000;
pointer-events: none;
cursor: default;
text-decoration: none;
}
All this combined will provide users with a link that is completely invisible without looking into the DOM or the source.
I have a DIV container which used to display the text included by users. But, I have a problem when the users try to add long text without adding white-space(Ex: balalalalalalalala...) inside the text or that text is in Unicode character, so, it will display only one line overflow my DIV container.
I want that to add a break line automatically by itself. How to do that?
Thanks :)
If you're down with CSS3 you may try the 'word-break' property.
To see a demo:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
The CSS word-wrap property is compatible with older browsers (IE 5.5+, FF 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+).
CSS:
div { word-wrap: break-word; }
Here's a fiddle.
That should work if white-space doesn't, otherwise just use white-space: pre-wrap.
In a <div> I have some text. Because of the div-width the text is shown in multiple lines. E.g. the following code:
<div>text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12</div>
might be shown in e.g. four lines:
text01 text02 text03
text04 text05 text06
text07 text08 text09
text10 text11 text12
I wish to keep only the first two lines, and if further lines are present they must be removed and replaced with the text line ... as a new (therefore third) text line.
In other words: I wish to find the second line break (if present) and replace all text after this point with a text line saying ....
So, if I have two lines of text, nothing is changed:
text text text
text text text
But if I have more than two lines like above, I will get this:
text01 text02 text03
text04 text05 text06
...
Any good advice?
You should do that in css and if necessary add javascript.
In css you can set:
.two-line-div {
max-height: 3em; /* or whatever adds up to 2 times your line-height */
overflow: hidden;
}
That will reduce the box to the desired height.
If you always want to show ... (if the content is always more than 2 lines), just add an element with the three dots after your div.
If you want to add another line with ... if the content is bigger than what you are showing, you would need javascript to calculate the original height, see if it is more than 2 lines and add / show an element dynamically if it is.
Note that a css solution does not remove anything, all lines are there, they are just not visible.
There is a pure CSS Solution working in most of the modern browsers (some older firefox versions didn't support it):
div {
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow: ellipsis; /* the magic dots...*/
height: <yourHeightValue>
width: <yourWidthValue>
}
Doing something like this in PHP could be a bit more complex, depending on what the DIV contains (nested HTML?, what exactly is a "line" for you -> a HTML break <br>, a line-break \n)? In most of the cases the PHP solutions split after a defined String or Word length. You can find quite a few examples for this kind of text limitations, this one is a complex solution which can handle html tags too.
You can use explode() to split your string (the contents of the div) into an array. Use <br> or /n as the split token. Then you can replace the contents of the div with the first two elements of the array.
$content = 'Hello<br>World<br>Other<br>Stuff';
$lines = explode('<br>',$content,2);
echo '<div>'$lines[0].'<br>'.$lines[1].'<br>...</div>'
I have been asked to come up with a solution which would allow our users to create their own custom javascript dialog text. However we need it to be centered.
At the moment, we have a textarea, which the user pads using spaces and tests with a preview button. I would like to change this to allow for the text to be center aligned automatically. I think this would mean just adding the spaces myself line by line in the backend, and also adding in the correct line breaks.
The only way I can think of doing it, is getting the longest line as int, and then subtracting subsequent lines from it, and diving the result by two, and tacking that many spaces on front and back.
Is there a cleaner more elegant way to approach this problem? Are there ways of aligning text actually inside the dialog?
I had considered something like TinyMCE, but I think it's a little overkill, for what is essentially a 150 character, 4-5 line string.
On the PHP side, you can do this.
$lines=array();
foreach (explode("\n",wordwrap($str,$len=80)) as $line)
$lines[]=str_pad($line,$len,' ',STR_PAD_BOTH);
echo implode("\n",$lines);
The Javascript version should be easy to write.
This page has a useful javascript function for center-aligning a string using padding. Assuming you're displaying plain fixed-width text (using a <pre> tag or similar) then you'll need to get the length of the longest line and pad accordingly. If not, it's just a matter of setting the css: #myDiv { text-align:center; } on the div containing the text.