i would like to know how can i make my title in divs automatically substracted to a certain number to stay fitting the div when resizing window or zooming website as youtube.com do ?
im substracting words like that
$string = (strlen($title) > 13) ? substr($title,0,26).'..' : $title;
echo "<div>";
echo $string;
echo "</div>;
But i dont know how to do this automatically so it can substract more letters to fit the div.
now what i have is when page resized or zoomed the title stay long and will out of the div.
how can i fix this with php or javascript thanks. i tried looking how youtube doing it but no luck.
You can use CSS3 text-overflow: ellipsis like this:
<div style="text-overflow: ellipsis;width:5%;overflow: hidden">
Some text
</div>
Try with the fiddle: http://jsfiddle.net/bBTaU/
Resize the window and see
EDIT
Not all browsers support CSS3, you can use a plugin like this http://dotdotdot.frebsite.nl/ to extend the support in old browser
I've got a fiddle with the data here:
http://jsfiddle.net/ktpmm5/Z5z8n/
and page is staged here:
http://steppingstonez.com/daretorepair/magazines.php
Basically my paging element gets shoved to the left and lays over top of my heading. This happens only in IE 8 - works fine in Chrome, FF and Opera. I'm going crazy trying to figure out what is wrong. html validates fine.
Any ideas?
Quick solution:
To make it roughly work, change the paging wrapper to have the position: relative, and float the ul.paging right (remove the position).
You'll need to add height into the head_text to include the paging wrapper (as paging_wrapper is now positioned out of the flow, so its height does not count).
Longer solution:
Even with the fix above, you still have the problem that a long title will overlap regardless, so I would define the area/width of the header (making it wrap if too long) and also restrict the area of the paging device (by limiting number of buttons that show).
Another quick solution: Specify the correct width for your .paging CSS class (UL). For example a width of 220px seems correct.
.paging {
...
...
width: 220px; /* new */
}
I think it seems more of an issue with utilizing negative margins. You have both a margin-top on the paging_wrapper and the paging li a. This is probably causing some weirdness for support in IE.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
text-overflow:ellipsis in Firefox 4?
I have the same issue mentioned in Truncating long strings with CSS: feasible yet?. It's been nearly two years since that post, and Firefox still ignores the text-overflow: ellipsis; property.
My current solution is to truncate long strings in PHP like so:
if(strlen($some_string) > 30)
$some_string = substr($some_string,0,30)."...";
That more or less works, but it doesn't look as nice or as accurate as text-overflow: ellipsis; in browsers that support it. The actual width of thirty characters varies since I'm not using a monospace font. The XML fix and jQuery plugins posted in the other thread appear to no longer work in Firefox either.
Is there currently a way to do this in CSS that is browser independent? If not, is there a way to measure the width of a string given a font and font size in PHP so that I might more accurately place my ellipsis?
This answer might be useful for getting your output truncated to the nearest word, and then simply append a … (…) HTML entity onto the end of the output to get your final output.
As you've noticed there's not sufficiently wide browser support yet the CSS solution yet, and you've still got to worry about old browsers too.
It is a shame that all browsers don't handle the same CSS features. However, you could always do something like this using JavaScript (with help from jQuery).
Here's an example of how such a thing might look: http://jsfiddle.net/VFucm/
The basic idea is to turn your string into an array of words, like so:
var words = full.split(/\s+/g);
Loop through them and take the first N (in this case I chose 24) and push them into another array:
for (var i = 0; i < 24; i++) {
short.push(words[i]);
}
Throw them back into the HTML element they came from:
$('.snip').html(short.join(" ") + ' <span class="expand">...</span>');
... here I added a "link" to expand the shortend text. It's made to look and act like a link using CSS. I also provided a function to replace the shortened text with the foll text again:
$('.expand').click(function() {
$('.snip').html(full);
});
I'm trying to wrap text in some big nice double quotes. I looked at this tutorial, but seems a little more complicated than I thought it should be. My gut tells me someone here in SO knows a smarter way. I'm open to anything: CSS, or PHP or Javascript, or Jquery (but preferably not JS/Jquery)
The tutorial doesn't look too complicated to me—I think their method is quite a good one.
If you don't like specifying one of the background images in :first-letter, you could use CSS3's support for multiple background images:
blockquote {
background: url("open-quote.gif") top left no-repeat,
url("close-quote.gif") bottom right no-repeat;
/* Other rules... */
}
...but this will only work in some browsers.
If I were you, I'd use the method described in the tutorial.
I'd recommend following the method they suggest: just add some styling on a blockquote element to give it a background image of your large quotes.
If you wanted a pure CSS solution, you can use something like this:
blockquote:before, blockquote:after {
content: '"';
font-size: 400%;
}
Of course, you'll have to play with the line heights and margins to get it looking ok, but even then, it's not gonna work in IE.
If a user types in a long line without any spaces or white space, it will break formating by going wider than the current element. Something like:
HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA.............................................................................................................................................
I've tried just using wordwrap() in PHP, but the problem with that is if there is a link or some other valid HTML, it breaks.
There seems to be a few options in CSS, but none of them work in all browsers. See word-wrap in IE.
How do you solve this problem?
in CSS3:
word-wrap:break-word
I was trying to solve the same problem and I found de solution here:
http://perishablepress.com/press/2010/06/01/wrapping-content/
Solution: adding to the container the following CSS properties
div {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
The idea is using them all so you get better cross-browser compatibility
Hope this helps
I like to use the overflow: auto CSS property/value pairing. This will render the parent object the way you'd expect it to appear. If the text within the parent is too wide, scrollbars appear within the object itself. This will keep the structure the way you want it to look and provide the viewer with the ability to scroll over to see more.
Edit: the nice thing about overflow: auto compared to overflow: scroll is that with auto, the scrollbars will only appear when overflowing content exists. With scroll, the scrollbars are always visible.
I haven't personally used it, but Hyphenator looks promising.
Also see related (possibly duplicate) questions:
word wrap in css / js
Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
I'm surprised that nobody has mentioned one of my favorite solutions to this problem, the <wbr> (optional line-break) tag. It's fairly well-supported in browsers and essentially tells the browser that it can insert a line-break if it's necessary. There's also the related zero-width space character, with the same meaning.
For the use case mentioned, displaying user comments on a web page, I would assume that there is already some output formatting to prevent injection attacks, etc. So it's simple to add these <wbr> tags every N characters in words that are too long, or in links.
This is especially useful when you need control over the format of the output, which CSS doesn't always let you do.
I would put the post in a div that would have a fixed width setting overflow to scroll (or to hide completely depending on the content).
so like:
#post{
width: 500px;
overflow: scroll;
}
But that's just me.
EDIT: As cLFlaVA points out... it is better to use auto then scroll. I do agree with him.
There is no "perfect" HTML/CSS solution.
The solutions either hide the overflow (ie scrolling or just hidden) or expand to fit. There is no magic.
Q: How can you fit a 100cm wide object into a space only 99cm wide?
A: You can't.
You can read break-word
EDIT
Please check out this solution
How to apply a line wrap/continuation style and code formatting with css
or
How to prevent long words from breaking my div?
I dodge the problem by not having my right sidebar fixed like that :P
Here's what I do in ASP.NET:
Split the text field on spaces to get all the words
Iterate the words looking for words that are longer than a certain amount
Insert every x characters (e.g. every 25 characters.)
I looked at other CSS based ways of doing this, but didn't find anything that worked cross-browser.
based on Jon's suggestion the code that I created:
public static string WrapWords(string text, int maxLength)
{
string[] words = text.Split(' ');
for (int i = 0; i < words.Length; i++)
{
if (words[i].Length > maxLength) //long word
{
words[i] = words[i].Insert(maxLength, " ");
//still long ?
words[i]=WrapWords(words[i], maxLength);
}
}
text = string.Join(" ", words);
return (text);
}
I didn't want to add libraries to my pages just for word breaking.
Then I wrote a simple function which I provide below, hope it helps people.
(It is breaking by 15 characters, and applying "& shy;" between, but you can change it easily in the code)
//the function:
BreakLargeWords = function (str)
{
BreakLargeWord = function (word)
{
var brokenWords = [];
var wpatt = /\w{15}|\w/igm;
while (wmatch = wpatt.exec(word))
{
var brokenWord = wmatch[0];
brokenWords.push(brokenWord);
if (brokenWord.length >= 15) brokenWords.push("");
}
return brokenWords.join("");
}
var match;
var word = "";
var words = [];
var patt = /\W/igm;
var prevPos = 0;
while (match = patt.exec(str))
{
var pos = match.index;
var len = pos - prevPos;
word = str.substr(prevPos, len);
if (word.length > 15) word = BreakLargeWord(word);
words.push(word);
words.push(match[0]);
prevPos = pos + 1;
}
word = str.substr(prevPos);
if (word.length > 15) word = BreakLargeWord(word);
words.push(word);
var text = words.join("");
return text;
}
//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);
Add the Zero width space () to the string and it will wrap.
Here is a Javacript example:
let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add between every character to make it wrap
longWordWithOutSpace.split('').join('');
! I did not wanted to make my code more complex with Javascript.
my developing Env was Blazor and UI was for Smartphone.
the Code had a list of file names and some of them where a very long name without space or any other helping Char.
for me this works:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
overflow-wrap: anywhere;
" overflow-wrap: normal; " not work becase it needs space in strings to wrap.
"overflow-wrap: break-word;" not worked for me maybe because it was not a word or something else. I am not sure!
I have posted a solution which uses JavaScript and a simple Regular Expression to break long word so that it can be wrapped without breaking your website layout.
Wrap long lines using CSS and JavaScript
I know that this is a really old problem and since I had the same problem I searched for a easy solution.
As mentioned in the first post I decided to use the php-function wordwrap.
See the following code example for information ;-)
<?php
$v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
$v2 = wordwrap($v, 12, "<br/>", true);
?>
<html>
<head>
<title>test</title>
</head>
<body>
<table width="300" border="1">
<tr height="30">
<td colspan="3" align="center" valign="top">test</td>
</tr>
<tr>
<td width="100"><?php echo $v2; ?></td>
<td width="100"> </td>
<td width="100"> </td>
</tr>
</table>
</body>
</html>
Hope this helps.