Can you tell me why the table cell with text is going out of the div?
My code:
http://nocleg-i.pl/1969/wyszukane/
It looks like a long text link is the culprit here. In cases such as these, you can simply use CSS to force word-wrapping. Just apply the following to your stylesheet and voila!
div.text_exposed {
word-wrap: break-word;
width: 500px;
}
(Please note that it is required to set a width for the word-wrap rule to apply)
As #Vinny Burgh said, the long link is the problem. However, Don't leave the anchor tags blank. Add some words to it so the url doesn't show up and the content doesn't break.
Missing text-Input text here
Basically, you have to put some text where I imply above.
Or, it could be a html bug, maybe some unclosed anchor like this:
<a href="the_actual_extra_long_link double quotes to close the href and a > symbol may be missing </a>
<div id="id_4f4e2a34992008a12697010" class="text_exposed_root text_exposed">
It's working good when I translated to English, browser does not support your language.
I think the problem is in your class. Remove the div class and and retry.
Related
Edit: This question doesn't make sense, and my actual problem was that I had an <a> tag inside another <a> tag.
I'm in a scenario where it seems like I cannot use tags for links. Is there any JavaScript alternative, that functions the same way?
I have a string of text, and I have parts of that string which I want to have as links. This string has a fixed width of 200px, and needs the CSS overflow: ellipsis (Thus it should not wrap)
JSfiddle: https://jsfiddle.net/LzL9cv00/4/
This is how you would create links.
<p>
So here we got Link1 and Link2!
</p>
Suggested change:
https://jsfiddle.net/LzL9cv00/6/
On my webpage I've used fancybox for preview section of description text in popup. Text shows perfectly fine on desktop but on popup it shows something like this.
Please note that the descriptive text I'm getting for the display it include for each space user gives for the sentence after each word.
and when I use word-break: break-all; it gets like this
then I've used word-break:break-word; also and get this
you can spot the difference now, that it breaks word viz clearly not acceptable. I want to break sentences meaningfully not the word!
Problem is I can only use HTML/CSS only here for fixing this, have looked many que/ans here but no luck.
Please help me into this.
I've created a JSFiddle please look into this may be this will help to understand clearly.
Note: If you don't want to modified server side scripts, you can use this JavaScript solution instead. I don't think you can do so with CSS only without doing any amendments in your server side code to remove these &nbps;.
In that case, you should first decode HTML special chars to simple text using following JavaScript code.
var text = $("<textarea/>").html('your HTML encoded text here with and all').text();
$('your viewing div/p selector').html(text);
And add this CSS property in your viewing div or p.
white-space: pre-wrap;
It should work.
Use word-wrap:break-word;
It even works in IE.
There are many possible values of the css "word-break" property.
http://www.w3schools.com/cssref/css3_pr_word-break.asp
word-break:break-word;
https://jsfiddle.net/1acbtr82
word-break:keep-all;
https://jsfiddle.net/dabros/1acbtr82/1/
The first works fine but does break up "googling" into "googlin-g", the second refuses to even do that.
I have a comment section which is of a certain width. When I post a long URL, this text is overlapping as there is no spaces in between. How to fix this in HTML
As far as I know there's no HTML way to do this. Since it's display/design related you can use CSS:
overflow: hidden;
This might work too:
word-wrap: break-word;
Overflow & Word-wrap links.
Edit: overflow: hidden will hide the text that extends beyond the size of its container and word-wrap: break-word should force a break in the word.
You have a few options. You could amend your comment system server-side so that it automatically puts in a line break if a word is over a certain length.
Or, you could set the CSS style overflow to hidden, scroll, or something like that to prevent the containing DIV of the comment from being stretched - that could do the trick too.
There is no solution in pure HTML. If you can use JavaScript or AJAX, you can convert the URL into a real link and replace the text part with only the first 20-30 characters of the URL: http://some.com/a...
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line
I have a web page that displays a pdf document. In the header there is an image and an h1 tag that contains a name. When the name is too long, it gets cut off. How can I force it to wrap to the next line instead so that the entire name is displayed? I tried inserting a style="white-space:normal" but it doesn't help. Any suggestions?
word-wrap:break-word;
It should have the combination of two:
word-wrap: break-word;
white-space: normal;
thanks to Tor and Alex :)
h1 tags wrap by default. If they're not, something in your CSS is overriding that default behaviour. If you can post a link to the site, we can quickly help you out. You might want to consider installing Firebug for Firefox - it'll let you right-click on the h1 and view what styles are being applied to it, and from where they come.
Is the header contained wihtin another element such as a div? If so, check the overflow for that element and/or try setting it to visible like this:
style="overflow:visible;"
the h1 tag has a zero line height
style="line-height:100%;"