I have an example like this jsfiddle where I have a list of <a> element. Inside each <a> element I have a <span> and a <button>. What I would like to do is I want to align the button on the right, I do this by adding the class pull-right and it worked fine
<button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>
, and I want to align the span and the button on the same line, but if I have a very long Name inside the span then the button is no longer on the same line with the span. How can I fix this problem?
You can set width and display property to the span elements like this:
.surveySummaryList a span {
width: calc(100% - 40px);
display: inline-block;
word-break: break-all;
}
and add rule for your buttons width like this:
.btt{
width: 30px;
}
I updated the FIDDLE
Use position: absolute; in your styling and set the buttons right styling to 0. This will place your button at an absolute position, according to your parental div.
.btt {
position: absolute;
right: 0;
}
Live example
This is an issue I have faced a few times and usually what I do is decide the maximum length I will allow this value to be and then truncate after that with ellipsis.
It is up to you but I think this is a good choice to make as it is defensive coding to keep your display neat no matter what the value.
Here is an example CSS class you can add to your span:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related
I am having trouble producing an ellipsis effect when a series of span children overflows its parent container. I have set up the parent container to have all the necessary attributes for an ellipsis (nowrap, display, hidden overflow, and of course text-overflow as ellipsis) but with my current setup, my spans seem to not want to ellipse on an overflow.
...The elements are structured like this
<div class="outer">
<span class="genre">Adventure</span>
<span class="operator">OR</span>
<span class="genre"> Comedy</span>
</div>
...And the corresponding CSS:
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
.operator {
width: 20px;
height: 22px;
float: left;
}
.genre {
float: left;
}
While the desired effect is an ellipsis, what I'm seeing is the overflowed elements wrapping around instead. I was under the impression that any sort of wrapping would be prevented through my display as inline-block, as well as nowrap, but that doesn't seem to be the case here. This seems to be due to floating the elements, but what I've been looking for is a solution that includes these floats in this case. Here is a jsfiddle of my current situation: https://jsfiddle.net/k91wzsq3/2/ - And The screenshot below is the effect I'm looking for.
Any help would be greatly appreciated, thank you in advance!
You don't need to use the float property in this case, it will just mess up your element. You only needed to tell the .outer element that it is going to be inline, just like you did but then by adding the floats it broke everything. You only need this on you CSS
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
Fiddle here https://jsfiddle.net/zgranda/0Ls6fw4j/14/
I'm quite new to CSS. I'd like to display a long line of text overflowing with ellipses. This jsfiddle demonstrates a working example.
However, note that if you extend the window, the text remains limited at 100px (due to the max-width: 100px) attribute. If I remove the max-width attribute, though, the text never shrinks:
I'd like the text to extend as much as possible without causing a line-break. i.e. this is how it should look for the various window widths:
How would I go about doing this?
this will do the trick.. you can use display: block; instead of display: inline-block; then add margin-right: 75px; so that the text will not overlap the button.
.one-line-only {
font-family: monospace;
display: block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 75px; /*(you can set the value depends on your needs)*/
}
then add this css on your button, then add margin-top: -20px; to inline the button.
.b{
margin-top: -20px; /*(you can set the value depends on your needs)*/
float:right;
}
<span class="one-line-only"> Stuff to the left ---- Thisisareallylongthingwhichshouldbestoppedatsomepointforsure</span>
<button class='b'>Stuff right</button>
JSFIDDLE DEMO
I have a table with a column width: auto. It contains a text, which is shortened by the ellipsis when it doesn't fit a column.
Now, I want to append a number besides the text. However, I still want the text to be shortened when it is too long, but the number has to be visible anyway. Below are a few illustrations of what I am trying to accomplish.
It is also required that the number stays near the text at all times. I can make it work when the number is at the fixed position by setting the text's div.text { width: 95% }, but this is not entirely satisfactory.
Please, take a look at JSFiddle to get the idea: http://jsfiddle.net/ZRZfk/. The JSFiddle does not work as I would like it to because the width of the text is fixed.
Is it possible to solve this problem without using JS?
Use max-width instead width Demo
I think replacing width:95% with max-width:95% does what you want? Demo here
.text {
max-width:95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
You can use trick with ::before and width thgough almost the whole cell.
.text::before{
content:'… (1)';
position: absolute;
display: inline-block;
color: gray;
left: 70%;
background: pink;
}
JSFiddle
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>
I have a page where I need a piece of text to appear aligned to the upper left of an absolutely positioned element (a span, if it matters), and a button to appear aligned to the upper right of the same element. edit: Problem with this is even when I use float: right; and display: inline; the button still likes to drop the next line.
Currently my solution is to wrap the button with a span element, float the span to the right, and then set the button to absolute position. Problem with this is it doesn't appear unless I manually specify the width of the wrapper span to fit whatever size the browser renders the button. Which is kinda dumb.
What's the proper way to do this?
edit 2: Here was my original code:
#header
{
position: absolute;
top: 0;
bottom: auto;
left: 0;
width: 100%;
height: 24px;
overflow: hidden;
}
/* Header's buttons. */
#header > span
{
float: right;
width: 100px;
}
#header > span > button
{
position: absolute;
}
And the HTML:
<span id="header">
Trigger editor
<span><button type="button" id="h_output">Output Triggers</button></span>
</span>
Hope I understood correctly.
<div class="clearfix">
<div style="float:left">Text</div>
<div style="float:right">Button</div>
</div>
Where clearfix is the famous one (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). In this way I don't think you need to explicitely set the width of the text or the button.
I believe 'the proper' way it to use DIVs (not SPANs) for element positioning. But yes, you'd have to set the width explicitly on the floated DIV on the left, otherwise it'll take up the whole line (being a block element and all). Just make sure that your width is enough to show all contents of the DIV without overflowing.