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.
Related
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 reading a string my user is inputting via PHP and I need to spit it back out in a div tag. This div tag has a width of 500px. If the user enters a word that is too long, the word will overflow the container. If the user enters two words that are almost two long, it will split into two lines.
My question is how do I determine if a word is too long or not? I have tried setting a character count, which is not an accurate representation of length as certain characters (ie W and I) have different widths. Is there a solution?
My current algorithm is to break the user input into chunks, each of 40 characters, and output it.
If you want to still implement your character count mechanism you can; you just need to make sure your text is mono-spaced (same width). To do this you can just add <pre></pre> around your text block; this can also be accomplished with <code></code> and <tt></tt> but if you want a simple CSS solution you could use.
<style>
.myclass { word-wrap:break-word; }
</style>
<p class="myclass">some text</p>
Usually you shouldn't use PHP for things like that. Try CSS instead:
.break { word-wrap: break-word; }
will do the trick
you can simply break-up words that are larger than, say, 20 characters - into chunks, using the <wbr> tag. Here's some more info: http://motyar.blogspot.co.il/2011/07/tell-browser-they-may-break-your.html
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>'
In my form I'm asking users to enter a text and then when they submit the form the text is sent to my database. When I query the entered text and I insert it into my html page it doesn't fit the container instead if a line has to many words it outputs the line in length. I'd like to know how can I do to crop the line if its size is way too much assuming the size of the container in which it reads. and oh ! to extend my request : what is the best way to treat user input and retrieve it in the exactly same format ??
If you need to "crop" text you can simply use substr.
echo substr($string,0,150);
This will cut your string up to 150 chars
#OP: after reading your question. Did you mean the css ?
overflow: hidden;
Anyway even if you div is set to display:block; it shouldn't show the horizontal scrollbar
Addendum
The problem with your link is that your div has the class listing with
white-space: pre;
you should change it
white-space: normal;
This is not a perfect solution, but you could do it like this:
$string = 'yourstring';
if (strlen($string) > TheMaxSizeOfYourString) {
$string = substr($string, 0, TheMaxSizeOfYourString-3);
$string .= '...';
}
This isn't perfect as the actual width of your string varies on the font you use.
Not sure what the problem is. If you specify the maxlength of a text input, you'll always have a set max length of your text. Otherwise you can do substr($yourstring, 0, your_set_length). However simply setting maxlength makes more sense.
you can shorten text to a specific length and 'round' it to the nearest full word by using something like i've got below, and even have it add some trailing "..." if needed...
function ShortenText($text,$chars) {
// Change to the number of characters you want to display
$orig = $text;
$text = $text." ";
$text = substr($text,0,$chars);
$text = substr($text,0,strrpos($text,' '));
// Add ... if the text actually needs shortening
if (strlen($orig) > $chars) {
$text = $text."...";
}
return $text;
}
If the only problem related to formating is the new lines then I would go like this:
User enters some text in text area.
I clean the text which is I remove all new lines, (also if you like remove tabs or multiple spaces).
Store the clean text in the database.
When the text will be retrieved then you output it in html page, if you place it inside a div then you don't have to worry because the text will break on its own.
If you need to show a preview of it you choose the substr as indicated above.
Conclusion I don't think that your request to get the text in excactly same format is a good idea (except that you have sth unusual-else in your mind). In contrast you want to clean the text that the user inserts. Hope I have understood correct what you are trying to do!
I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!
Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).
I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.
Is there any suggestions to do that ?
You can skew the containing div
.holder{
transform:skew(-40deg);
}
<div class="holder">
<span class="rotate">Just </span>
<span class="rotate">Like</span>
<span class="rotate">This! </span>
</div>
and then unskew each word inside it.
.rotate {
transform: skew(40deg);
}
https://jsfiddle.net/dcst94sv/5/
There's a very easy way to do this with CSS. Create a list. Then use li::before to add left-side padding to the list items. Set the li::before element to be a tall and thin block floated to the left. Each one will create left side padding for its parent list item and all those below it.
Like this:
li::before {
content: "";
display: block;
float: left;
height: 50px;
width: 10px;
}
<ul>
<li>sancti et dilecti</li>
<li>viscera misericordiae</li>
<li>benignitatem </li>
<li>humilitatem</li>
<li>modestiam</li>
<li>patientiam</li>
<li>caritatem</li>
</ul>
To count the number of words within the paragraph excluding HTML tags, use:
$tagless_content=strip_tags($content);
str_word_count($tagless_content);
Update
Here is code to increase text-indent via jQuery
jQuery.fn.stripTags = function() {
return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') );
};
then use the String.length JavaScript property
var len = $('<p>').stripTags().length();
for(var i=0;i<len;i++)
jQuery('<p>').css('text-indent',+i+'px');
Reference
Strip tag via jQuery
strip_tag PHP function
str_word_count PHP function
There's no straight-forward solution that I am aware of, since, as you indent each line of the text more and more, the length of space that each line can take up will decrease, creating new lines.
For example:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
Post-indentation:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEX
T
TEXTTEXTTEXTTE
XT
TEXTTEXTTEXTT
EXT
TEXTTEXTTEXT
TEXT
This problem will exist if (1) you are processing lines created due to word wraps, and (2) if you detect all of the lines at once and then do all of your indents (as opposed to an algorithm that updates the <p>'s text. If the font family is mono-spaced font, then this can be adjusted for.
Best-case scenario is that these are <br>-terminated lines, in which case this would be very easy.
Slightly more difficult would be doing this with a mono-spaced font.
Worst-case scenario, describe above, would require searching for the first line that is not indented, then indenting it, updating the <p>'s text, and then repeating the process until the text is completely gone through or if the amount of indention exceeds with width of the <p>.
I would suggest asking your question again, providing the following information:
- are the lines terminated with <br> tags, or are they word-wrapped? If it is word-wrapped, is the font mono-spaced or variable-width?
After many Searching stuff I found something useful http://www.csstextwrap.com/examples.php
I think after some modifications it will fit my requirements. thanks for your highly appreciated Responses.