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.
Related
I have a list of items, where each item is split up into 3 parts.
<li>[long part(1)] [separator(2)] [important part(3)]</li>
I want the first part ("long part") to truncate instead of wrap.
I can get the first part to not wrap, while the other parts wrap - but I can't figure out how to get the browser to truncate the first part.
Here's a codepen example: https://codepen.io/fiver/pen/rGRevq?editors=1010
Use the Change view button to move the output pane to the side. Then you can use the slider to see the wrapping behaviour. I tried using flexbox ("flex try") and styling overflow attributes ("overflow try") but both just extend the text out off the view.
The third item is my workaround (just let it wrap) - it's not what I want to do, but it works.
So is there any way I can get that first part to truncate (with or without ellipsis)?
I only need to get this working in modern browsers: Edge (not actually a bid deal), Chrome, Firefox and Safari (mobile and desktop). I don't need to worry about IE or Android browser.
Example of answer: https://codepen.io/fiver/pen/yEYWmp
Your "overflow try" works but you need to put these 2 in <li>
overflow: hidden;
text-overflow: ellipsis;
as you are using spans. you need to set display property in CSS and width too.
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 40%; /* it be upto requirment */
}
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.
Consider:
As shown in the above image, the exceeding words need to hide and dotted line needs to show. How can I do this word wrapping in CSS and AngularJS?
You can use the text-overflow style available in CSS:
text-overflow: clip|ellipsis|string|initial|inherit;
Use ellipsis to trim the word and show dots.
See Word wrapping in CSS.
Just use a class for the clipping and apply it with 'ng':
.is-clipped {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
To make the text cut off with ellipses when it overflows the container, with CSS you need to apply several properties to your container (in this case <p>):
text-overflow: ellipsis;
This is what defines the actual display (the ellipsis, or the dotted lines the way you called them).
Here is the list of all possible display types: text-overflow: clip|ellipsis|string|initial|inherit;
overflow: hidden;
This tells the content to cut-off when it overflows. If you don't set this, the text will simply display in full, without cut-off.
Other options are: overflow: visible|hidden|scroll|auto|initial|inherit;
width:
You need to set the vertical limit of the container, i.e. the point when the content needs to cut-off. Since you are using ellipses, you need to factor this into the width.
Important: For the content to cut-off, the container needs to be a block or inline-block element (e.g. no display: inline) and width needs to be applied in px, not in %.
white-space: nowrap;
This tells content that it should not wrap when it reaches the container limit set in step 3. If you don't set this, the content will simply wrap to the next line, and none of the text-overflow will apply.
All possible white-space values are: white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
Note: This will cut the text off at the point where the container ends, which will sometimes result in not so nice language syntax issues (e.g., words cut off mid-way, or a space between the last word and the ellipses).
Filter
app.filter('ellipsis', function() {
return function(text, length) {
if (text && text.length > length) { // If it is not null then check length
return text.substr(0, length) + "........";
}
return text;
}
});
Use this filter in the view as:
<span ng-bind="post.post_content | ellipsis:200"></span>
To do it in CSS, you can use the ellipsis property. Please visit CSS text-overflow Property (W3Schools).
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
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;
}