How to force in twitter bootstrap show text inline with overflow? For example in http://jsfiddle.net/nonamez/jJdX4/ overflow is working except the inline words. In my code nothing works.
Use white-space and set it to nowrap which will make text go into one line until a break is reached.
li {white-space:nowrap;}
http://jsfiddle.net/jJdX4/1/
Related
I am trying to add a success onto a page on our website: https://www.knowsleycollege.ac.uk/results-day-2021-successes/ and have the image appear on the right, and the text wrapping around it.
However, it seems to align to the right, but then not all the text wraps around it. I have tried adjusting the CSS, but nothing seems to work.
How can this be solved?
The <p> tag has "clear:both" property set. Due to this the text is not wrapping adjacent to the image. see the screenshot for reference.
Removing this "clear" property will work for you.
That's due to the GENERAL clear: both; setting for p tags of your theme. You could erase that in your stylesheet, but that might affect a lot of other pages.
Or you add a style="clear:none" attribute to those p tags which follow the image in the "text" (actually code) mode of the editor, like
<p style="clear:none"> ...your text ... </p>
I need to ensure the paragraph clear property is set to none.
I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)
I have a element (e.g. a label) with a fixed width and I want that only the text to be dotted-underlined. If a do the "trick" with border-bottom the whole box will be underlined
I think this explains my problem
You should wrap it into a span and add that border-bottom style to that span: http://jsfiddle.net/mrg9a/2/
You could wrap the text in <span> tags and then apply the style to the spans.
See the second element in this jsFiddle example.
Since label elements are inline by default, the problem is caused by making them inline blocks. This in turn is presumably an attempt to avoid using the most natural and most effective way of structuring a form, namely an HTML table. Just switch to table markup and use label inside td with no fancy settings, and the label elements will take the border you set on them, in their natural width.
I have problem to display long text into div they have no space.I want to display this text into next line.
Solution
I have used css word-wrap:break-word and it solved my problem.
Use the following CSS in the right place and you'll have what you need...
white-space: normal;
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.