I am doing a text-overflow: ellipsis in a div to truncate some extremely long text values. Basically to avoid the overflow from increasing the width of the div since there is no white space in URL. What I need to do is display the following:
http://www.somewebsite.org/over-the-counter/drugs/medone.html
http://www.somewebsite.org/over-the-counter/drugs/medtwo.html
http://www.somewebsite.org/over-the-counter/drugs/medthree.html
as:
...he-counter/drugs/medone.html
...he-counter/drugs/medtwo.html
...-counter/drugs/medthree.html
Is this doable at-all in HTML/CSS? or is jQuery/PHP my only resolve?
BTW, upon mouseover the full string is displayed as a tooltip.
$short = '...'.substr($url, -20);
In tooltip just show $url
You can accomplish that with pure CSS and direction property set to rtl (right to left) on the container.
Related
I had used nicEdit for edit my paragraphs and questions etc.With some alignments too.
In the above I had showed you one example. This is single paragraph only. However in the rich text editor by default it will enclose each sentence with a <div>. For one drag and drop issue. I had added css code with
.nicEdit-main div {
display: inline-block;
}
So that I can drag and drop boxes.Now what is the issue because of my addition of inline-block. If people will try to delete or move forward backwards instead of moving words it's deleting content. What is the solution for this?
Thanks in advance.
http://www.nicedit.com/demos.php
Use the below code to remove all divs without class attr inside the element .nicEdit-main
$('.nicEdit-main div:not([class])').each(function(){
$(this).contents().unwrap();
});
I want to close out my old question start a new one with a better sample photo.
I am trying to add a transparent png background to some dynamic text with line breaks and give it 15 px padding at the end of each sentence when the line breaks. But this text does not have the br tag in the html code. I don’t want the background to be a square box. I uploaded a sample of what I have and what I am trying to get. I heard there is a php script that can count characters like strlen, count_chars, substr_count. Can anyone help me. My css is below. It’s a span tag around dynamic text that changes. This is a Drupal Views Slideshow and it changes every few seconds, the photo and the text.
Below is the code in Drupal Views I used Tokens for the text that needs the padding the Token is called 'text'.
.bluebackground
{background-image:url(images/transparentback.png);}
<div id="textbox">
<span class="bluebackground">[text]</span>
</div>
I'm not sure why you would need PHP, instead just use CSS.
.bluebackground {
background-image:url(images/transparentback.png);
padding: 15px; /* add 15px padding around entire box */
}
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!
When building websites I'm forever chopping up strings to make them display nicely as headings and paragraphs. I use the substr function to chop-off unwanted characters and then add in ellipses. For example:
if ( strlen ( $mystring ) > 22 ) {
echo substr( $mystring,0,21 ).'...';
} else {
echo $mystring;
}
This works pretty good most of the time, but it is far from perfect. Check out how the shortened headings look on one of my sites. You can clearly see a lot of inconsistency in how the shortened headings look.
Surely, there is a better PHP method/ technique?
Your problem is that normal fonts are not monospaced, i.e. the various letters have different widths. Because PHP can't tell the final width of the resulting string in the browser, it is impossible to tell what position one needs to cut the string at.
There are jQuery based solutions for this (jQuery, running in the browser, does have access to the actual width information. #Dan shows a plugin in his answer); the downside of this of course is that it won't work without JavaScript.
If you want to invest the time, it would be possible to use GD's imagettfbbox() to calculate the approximate boundary using a common font like Arial. That would be far from perfectly reliable, but should give you a rough idea where to apply the cut.
No, because PHP doesn't know anything about how the text is going to end up rendered in the browser. Other people aren't even seeing the same thing you are for the same HTML, so how can changing the HTML your PHP generates fix this?
The only way to get consistent length text is to do the adjustments on the client side.
Something like the jQUery Ellipsis plugin:
http://plugins.jquery.com/plugin-tags/ellipsis
Edit: My bad, you want ellipsis... Your ellipses looks fine on that page you showed...
If you Really want them to line up you could put the text in an inline element with max width such and such and overflow: hidden followed by a seperate element with the ellipsis.
Another way is play around with CSS. You don't cut your text (or you just shorten it a bit if it's very long) and then you place it in a fixed width container with overflow: hidden. If you want the dots you can add another element containing them above the end of the text with position: absolute.
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.