I have a system similar to BB code whereby text within two tags is converted into a link which when hovered over produces an line image.
The problem is that sometimes if the phrase is long the text wraps onto the next line. When this occur the image is displayed above the text on the preceeding line and doesn't look right. Because of this I want to ensure that if the text is going to wrap, it instead breaks to a new line.
I'm happy with any CSS3 only solutions to this.
Thanks
give your a css display: inline-block. Inline block doesn't allow breaking within the block and therefore moves to the next line.
a {
display: inline-block;
}
Related
I have a site where the client wants to be able to put a stylized graphic at the end of some link text. Conceptually, it'd be like this:
This is My Fancy Title<img src="fancypic.png"/>
Except at some widths, word-wrapping causes the image to wrap as a widow on it's own line.
I've tried quite a few different approaches to this, including the widows CSS property, but nothing seems to work 100%.
Any suggestions?
You can use white-space: nowrap.
That will cause the text and image to not wrap to the next line.
Add a span and put one or 2 words and the image in it, make it inline-block
span {
display: inline-block;
}
This is My Fancy <span>Title<img src="fancypic.png"/></span>
I have a link at the very end of 4 paragraphs. Something like:
Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this
http://mylink.com
So, the actual code for this would be as follows in HTML:
<p>Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this<br />
http://mylink.com</p>
I am using <br /> here, but I don't want to use <br /> because the screen captures how much text actually shows and sometimes it could look like this:
Here is my text, and it's just an example of text to show And I am wanting to wrap
the last bit of text, which happens to be a link, but I need the link to either stay
on the line that is the available width and not break to another line, unless it can't
fit left-aligned on that line like this
http://mylink.com
So, in a situation like above, I would need it to not use a <br /> tag to break it up and it should render like this instead:
Here is my text, and it's just an example of text to show And I am wanting to wrap
the last bit of text, which happens to be a link, but I need the link to either stay
on the line that is the available width and not break to another line, unless it can't
fit left-aligned on that line like this http://mylink.com
Is this possible to do via CSS? Some text-align value perhaps, or something else in order to accomplish this without using <br /> tags at all? But if the link can fit on the line naturally, than it shouldn't move to the next line down. Instead it should stay on that line.
Thanks!
Some browsers interpret the slash in your URL as a character it is allowed to break your word on, while others will not. All you should need to do is adjust the white-space property of the link
http://jsfiddle.net/Msc4S/
a {
white-space: pre;
}
Use this html as you want:
<p>Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this
http://mylink.com</p>
But add this into the CSS.
a {
display: block;
}
However this will make a on the new line everywhere, so you have to specify it more with this CSS
p a {
display: block;
}
Here is the jsfiddle example http://jsfiddle.net/vzmtB/ (without using p a) and http://jsfiddle.net/vzmtB/1/ (with using p a).
I think the default word-wrap without break does this already. when some thing doesn't fit in line It moves to next line, but If it can be fit then it doesn't move to next line. You need to have a defined width of parent element, in which text gonna be fit. check this fiddle.
nothing you need to do in css.
I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <img class="icon" ...> where
.icon {
display: block;
float: right;
padding-left: 4px;
}
The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.
So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.
Any help would be greatly appreciated!
Adding the following rule to the css of the element you have your text in might help:
white-space: nowrap;
I think I got it working.
Basically, I had the title text within a div (also tried span). But if I didn't put it within anything (ie, it's part of the main title div), everything seems to work.
I have a box where user activity will be inside.
Now I am having two issues.
The first one is that i have a float left element, and when this ends the text also goes at left. (issue1)
The second is that if you type in a non-breaking word/sentence, like eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee it wont break it and go under, but allows it going to the right, like it do not listen to the width specified.
Here is live of both issues:
http://jsfiddle.net/AB4Ls/5/
Help please, how can I solve this, and why is this happening?
For first issue set element that contains text to be displayed as block and give it left-margin amount of floated element width.
display: block;
margin-left: 40px; /* adjust to your needs */
For second issue check this url: http://perishablepress.com/press/2010/06/01/wrapping-content/
Explanation is to long to repeat it here.
Are you sure it is possible you have such long words?
If true you can use css3 property word-wrap or parse words with php before displaying it.
I think you're saying that you want the text in the issue 1 to NOT flow back under your image that you've floated to the left.
If so, just surround the text with a div tag and use display: table-cell. This will put a "rigid border" if you will, around your text.
I want to use a background image to highlight text in a paragraph. I do not want to use the background-color property for this as I want an image that look more like it was hand highlighted. How can I do this INLINE? I seem to only be able to do it as a block element and then the text breaks to its own line. I need it inline, a sentence here or there within a paragraph.
Example of it working but only as a block level element:
link text
Please scroll down a bit to the YELLOW highlighted text. I need the highlighting to NOT cause the text to break onto the next line AND to end when the associated span ends, which could be right in the middle of a paragraph.
THANK YOU! I read all over the place and could not see a solution.
Change display: block to display: inline on .highlite1.
What browser are you using? Works fine in Firefox 3.6.10 with display: inline.
Setting the span to display:inline seems to work in Chrome and FF. Not tried it in others though.