I'm working on a site wich has filters on category pages - http://www.purrfectlyyappy.com/fun-and-games/dog-toys
The filter is on the left hand side, but the text in the filter appears under the products when it's too long, is there a way i can set it to break onto a second line if the name is too long?
Seem like it should be easy, but i've been struggling on this!
This is happening because there is a css in you page
.hikashop_filter_checkbox {
white-space: nowrap;
}
Above css is already applied on your html page which is forcing elements to come in single line.
You can either remove this css and if not then use following css in label
.hikashop_filter_checkbox label{
white-space: normal;
}
Use the overflow property.
enter link description here
Here, adding :
overflow : scroll;
will make the "too long text" in a scroll area. There are many other values.
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
So after hours of searching I cannot find a simple solution to this problem. I run a website, and am very limited in my self taught HTML and CSS coding. My site runs Wordpress as the foundation, and when making a post, sometimes we put in long URLs. Often times those long URLs extend outside of the boundaries of the actual post, and push into the sidebar widgets, and even sometimes extending the entire page so that there is a scroll bar. Like I said my knowledge of coding is relatively limited, and I'm looking for a simple solution to fix this problem quickly. I don't want a long drawn out way to do it, as I will likely have to implement them on a daily basis. So let me know what you think about the solutions. I've read a couple things about word-wrap and but I'm just not grasping it. Please somebody who knows what they're doing explain a solution to this using HTML in terminology that anybody could understand.
Thanks in advance.
Here's a little look at a few things you can do, and what effect they'll have:
http://jsfiddle.net/fW5bF/
In the first case, the paragraph has a set width, but the content is too long, and therefore it's height expands to enclose all the text. Notice that the text is broken up into separate lines where the white space is.
In the second case, I've used white-space: nowrap; to prevent the text from being broken up into multiple lines. This causes the text to overflow the boundaries of the paragraph element.
I then hide this overflow using overflow: hidden;.
And then I use text-overflow: ellipsis; to include ellipsis indicating that there is more text, but that we ran out of space to show it.
Now we have a single really long 'word' (such as a URL) and hence there is no white space. Therefore, by default, it just overflows it's container.
You can break up a single 'word' into multiple lines using word-wrap: break-word;.
Or again, you can use overflow: hidden; to hide the overflow, and text-overflow: ellipsis; to include ellipsis.
I suggest you look up all these properties on a reference site like MDN: https://developer.mozilla.org/en-US/docs/Web/CSS
The css rule "word-wrap:break-word" ought to do what you are looking for.
Here's a fiddle: http://jsfiddle.net/9AZtx/ using:
p
{
outline:1px solid #ccc;
width:20em;
word-wrap:break-word;
}
You can use text-overflow: ellipsis:
.element {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
I'm trying to show boxes of people's names.
The problem is that these names can get pretty long, and with a fixed width box, crazyness is sure to ensue. Long spaced text breaks, causing problems on new rows (http://jsfiddle.net/9MhWW/) and disabling line-breaks with white-space: nowrap; will overflow the box (http://jsfiddle.net/9MhWW/1/).
Working with line breaks seem like the best option. If you agree, that begs the following question: Is there a way to make sure the row-problem doesn't occur without losing part of the text, having a div for every row or giving the paragraph a fixed height?
If just one row is ok for you, set a overflow: hidden:
p { overflow: hidden; }
A nice effect will be using ellipsis to replace the overflowing text with ...:
p { overflow: hidden; text-overflow: ellipsis; }
See this update to your fiddle.
I think I have come up with a solution. So bootstrap adds loads of stuff in to make it look nice of course, but in your case we have to undo some of that. So we have to get rid of the float left and replace it with display inline-block:
.span2{
float: none !important;
display:inline-block;
}
See the fiddle update. I had to change the text alignment to match what you had previously.
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
I am creating a web app using ASP.NET MVC, which shows some articles to user.
And there is a summary of every article on a div.
Currently, I'm loading the whole content in summary div and set this style overflow:hidden for that. This is the result:
But that fragmentary line (last line) is ugly, also whole content is downloading to user's computer, which is bad for speed and performance.
I want to have something like this: (the image below is my goal)
(Remove that fragmentary text at last line, and add ... at the end of text)
Also it is good to avoid downloading whole content to user's computer.
How to do that?
PS: Anyone know a better title for this question?!
You can set a number of characters to show, then if text to show is bigger than the limit number, truncate:
if(text.Length > 200)
{
text.Substring(0, 200) + "...";
}
Or if you are building the system, you can create a limited field to save a preview text and in listings show the preview text instead the big content
Put your text in another div and use height + line-height
Working example:
http://jsfiddle.net/DNh4W/2/
If you want to end with ellipsis there is no solution in CSS3 for multiline text. You must use javascript, for example: http://pvdspek.github.com/jquery.autoellipsis/
Example of jquery autoellipsis: http://jsfiddle.net/bdM89/1/
First of all, I believe truncating the text (to a certain number of characters) and adding the ellipsis should be done on the server side.
Then, if you want to do this using only CSS, you need to simply let the height of the div be auto. It probably won't be the same for all, but it will look nice.
if you have no problem using CSS3 in terms of browser compatibility, you can use CSS to truncate the text, like in this tutorial:
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; /* required for Opera */
-ms-text-overflow: ellipsis; /* required for IE8, allegedly */
-moz-binding: url('ellipsis.xml#ellipsis'); /* for Firefox; details [here][2] */
}
Regarding mozilla firefox, here is a tutorial how to deal with it using XMLs