Weblinks are not responsive, they increased the mobile page width and create bad user experience.
I am using Asona theme.
Fix this problem, the weblinks doesn't bend and goes on next paragraph, they are just goes straight.
try using the overflow-wrap property to break the string enabling it to wrap onto a new line.
overflow-wrap: break-word;
Since in cases like these, people will just want to click the link and not read it, you could simply use overflow: hidden on the direct container, i.e. the lis of that list.
And you could also add text-overflow: ellipsis; to make clear that the link is longer than what is visible on the screen:
ul.link_list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul.link_list {
padding: 20px;
}
<h4>Link List</h4>
<ul class="link_list">
<li>https://www.example.com/kjhadfkjh/oiuwoijwrv/ljnsvkjns/oiwueroiuwe/kjnsdvkjn/llksuerlkulku/lkamsclkm/lkjaelrkjl</li>
</ul>
Related
I want to be able to add three dots and maintain a text in a single line in a responsive design.
So for example:
I have a link with a link inside a container element (e.g. <span>). If the text is long, it will shown in two lines one a small screen:
This is a very long text
and it wraps because it's very long
I want that text to be shown like this:
This is a very long text...
text-overflow: ellipsis; works if you have set a width to the container, but in responsive design and on my web app it's not specified obviously.
Here's the HTML:
<div class="itm-title">
This is a very long sentence and I don't want it to wrap, I want three dots
</div>
Is there a solution in CSS or jQuery that can solve this? thanks.
You actually don't need width to be "set" here. All the elements in the responsive design have their width. You can just do it around with the following rules:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Comment: This doesn't work with anchor:
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.
It works! :)
No width set.
Using <a> tag.
Updated with OP's Code
.itm-title {
width: 150px;
}
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="itm-title">
This is a very long sentence and I don't want it to wrap, I want three dots
</div>
Result: Works!
There's a billion of tutorials, but none have worked for me unfortunately.
I need some artistnames to be in the header, centered, but with a css ellipsis, so very long names gets the "..." and will be truncated.
You can see the design here: http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php
Remember to resize your browser window.
Its meant for mobiles, so I cannot have any fixed withs and it should work with all kinds of mobile screensizes. I can make the ellipsis work, but then the text is no longer centered.
Any clue on how to do this best? I would really like to avoid any javascript as performance is highly important.
You need to update the rules for h1 with overflow & text-overflow.
.header h1, .headerwhite h1 {
font-size: 15px;
line-height: 49px;
text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
overflow: hidden;/* triggers text-oveflow and mids floatting elements */
white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}
basicly same answer as dartanian300 :)
You may control the max-width of h1 too and add a margin:auto; : demo
UPDATE
Using display: inline-block simply removes the h1 altogether on smaller screens. You should avoid this.
Also, technically, the text is still centered. It takes into account the ellipsis when centering the text.
ORIGINAL ANSWER
In order for the ellipsis styling to work, you've got to set a few things on the element with the text:
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block ensures that the box you're trying to generate ellipsis on is shown as a block. If it's not, it won't know where the bounding box is.
text-overflow: ellipsis obviously should generate the ellipsis.
overflow: hidden for some reason, browsers won't generate the ellipsis unless you have this. I believe it has to do with the fact that the text will just flow outside the box with it.
white-space: nowrap this prevents your text from wrapping onto multiple lines. That way, you have one line with ellipsis at the end.
That work?
Please take look at this code:
td {
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
http://jsfiddle.net/kd4zF/
I want "td" Description cell to display in 2 rows. Overflow should be hidden.
white-space: nowrap; display only one row, and without it all text is showing.
Any ideas?
add :before and :after to td refer this http://jsfiddle.net/microbians/csYjC/
Try
white-space:pre;
also press on enter where you need to break the text.
Check the following screenshot
text-overflow: ellipsis just works on single lines. That's why you have to use the white-space thing.
You have to make some JavaScript to achieve it. There's also a jQuery plugin: http://pvdspek.github.io/jquery.autoellipsis
There's also a little CSS trick that can fake it in multiple lines: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css
I have a fixed-width sidebar consisting of a bootstrap nav-list where some list elements have right-aligned labels.
For example:
<li>
abc_test_randomrandom
<span class="pull-right label">0000</span>
</li>
However, this doesn't work if the link is long. It expands to fill the whole line, and pushes the label to the next line.
I've put up a jsFiddle demo to demonstrate this behavior. EDIT: And now a gist too.
The desired behavior is abc_test_randomrandom and 0000 on the same line, with the long string wrapping to the next line if necessary. Is this possible?
Yes. Use a fixed width and give overflow: hidden; for the excess with text-ellipsis.
li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}
I am unable to open jsFiddle. So couldn't see the exact issue.
I think Praveen's solution is actually a better implementation, but to get the behavior originally requested, display: inline-block, word-wrap: break-word and setting the width fixes it.
li a {width: 70%; display: inline-block; word-wrap: break-word;}
In Bootstrap a pull-right is essentially just a wrapper for CSS float. You need to put the 0000 span before the abc_test_randomrandom in the markup and it should wrap the anchor to two lines as needed, so your floating element comes before the element it's floating around. You may need to set a margin-right of the anchor to be the width of your floated element. I can't get jsFiddle to load right now or else I'd give you a better example. I'll try checking back.
EDIT: I was able to get your jsFiddle to load.
If you move the spans before the anchors in your HTML and add this CSS, this works. If your text is literally going to have underscores instead of spaces then you'll need the word-wrap CSS that you mentioned in your own answer.
The benefit of this is it doesn't require CSS hacks (i.e. for display: inline-block) to work in older versions of IE, if that's a concern for your project.
.nav-list a { display: block; margin-right: 30px; }
I've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?
About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing
Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}
Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.