I have a div with a fixed width, which has a div with text inside. Parts of the text are in a span for coloring. The text div has all necessary styles for text-overflow with dots at the end (ellipsis), but the dots are not inheriting the span's color, because their definition is on the div. When I put the definition on the span, it ignores its parent's width.
Test code:
.container {
width: 120px;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.color {
color: #b02b7c;
}
<div class="container">
<div class="text">Lorem <span class="color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- works -->
<div>Lorem <span class="text color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- doesn't work -->
</div>
Is there any clean CSS way to solve this problem? I'd like to stick with text-overflow: ellipsis;, because the other solutions for text truncation are a bit messy in my opinion.
Referrent source at https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
If I understand your issue correctly, this might work for you:
.container {
width:120px;
background: lightgray;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color:#b02b7c;
}
.color {
color: black;
}
<div class="container">
<div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
</div><!-- works -->
</div>
Demo Fiddle
If the ellipsis is taking the color of the div, then make the div the color you want the ellipsis to be, and use .color to set the initial text black.
Related
I have a few div’s, I’ve arranged them in 3 columns with this code:
display: inline-block; width: 33%;
Every div has a button. If you click on the button a hidden paragraph inside the div is shown. For this I’ve used the .toggle() function (jquery) with this css-code:
p {
display: none;
width: 100%;
height: 4em;
overflow-y: scroll;
overflow-x: none;
border: 1px solid black;
}
My problem is: when I click the button and the paragraph of the div is shown, the position of the other div's also changes (they all move down, really messing up the lay-out).
What I want is: the paragraph should only push down the div's in the same column. The position of the div's in the other 2 columns should stay the same.
Can anybody help me with that?
I think you need something like that.
You should surround your 3 paragraph div with an other to not mess up the layout.
<div>
<div class="paragraph" id="paragraph1">
<p>
1Lorem ipsum dolor sit amet,
</p>
</div>
<div class="paragraph" id="paragraph2">
<p>
2Lorem ipsum dolor sit amet,
</p>
</div>
<div class="paragraph" id="paragraph3">
<p>
3Lorem ipsum dolor sit amet,
</p>
</div>
</div>
I have some block of text like this:
<div>
<span class="part-1">Some text.</span>
<span class="part-2">Some text.</span>
</div>
Parent div element has fluid width. How to make two span elements to remain in one line if container is wide enough, to wrap them if there is not enough space, but to avoid wrapping inside span elements?
In other words, .part-2 should be either in line with .part-1 or below it, but always whole.
EDIT: Important part is that .part-2 should not overflow the container, which happens if white-space: no-wrap is used.
<style>
.unbreakable{
white-space: nowrap;
}
#container{
overflow:hidden;
}
</style>
<div id="container">
<span class="part-1 unbreakable">Some text.</span>
<span class="part-2 unbreakable">Some text.</span>
</div>
Using the white-space css property, you can define how wrapping can occur inside elements. Using nowrap will prevent any wrapping on spaces.
EDIT: Added overflow hidden so the text doesn't go out. You could use scroll to add scrollbars.
Flexbox maybe but you're still getting overflow.
Hmmm...
div {
margin: 40px auto;
display: flex;
}
.flex-title {
display: flex;
flex-wrap: wrap;
}
.flex-title > span {
white-space: nowrap;
padding: 0 1em;
border: 1px solid grey;
}
<div class="flex-title">
<span class="part-1">Lorem ipsum dolor sit amet.</span>
<span class="part-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, enim!</span>
</div>
How to make text wrap before inner floating elements inside a container?
Here is what I'm trying to do...
http://codepen.io/W3Max/pen/tKwqz
<div>
<div style="height:100px;width:300px;background-color:blue;float:left;"></div>
<div style="height:100px;float:left;word-wrap: break-word;background-color:green;">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk</div>
<div style="height:100px;width:300px;background-color:red;float:left;"></div>
</div>
I would like the text inside the green div (in the middle) to wrap before the row wraps when I resize the screen.
I would prefer to to support IE9. Is it possible without flexbox?
display:table is compatible with IE8+ and can achieve what you're looking for:
Forked pen.
.container {
display: table;
width: 100%;
/* if you don't want 100% width, set a max-width too */
word-wrap: break-word;
}
.container > div {
display: table-cell;
height: 100px;
}
.container > div:first-child, .container > div:last-child {
width: 300px;
}
<div class="container">
<div style="background-color:blue;"></div>
<div style="background-color:green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div style="background-color:red;"></div>
</div>
HTML
<div id="green">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk<div>
CSS
#green {padding:10px} (resize it) on green div .
I have a list of simple HTML elements like divs, Paragraphs, etc. I'd like to display them in fixed height container, with the content shown in columns with same fixed width, all horizontally scrollable, just like it's shown on this picture.
The browser it should work in is IE11.
Any idea, how to implement it? Thanks.
Put them all in:
<div class="sample"></div> and wrap them in a <div class="container"></div>
Give all .sample classes and .container a fixed width and height.
.sample {
width: 900px;
height: 500px;
}
.container {
overflow-x: scroll;
overflow-y: hidden;
}
You could use css3 columns
http://www.w3schools.com/cssref/css3_pr_columns.asp
<div id="main">
Content here, no wrapping divs needed...
</div>
Or even better using html5
<main>
Content here, no wrapping divs needed...
</main>
You must put all the elements in a container, and give it a width large enough to not wrap the elements around. The elements should either float: left or display: inline-block.
Then put a div pane around, which shows a cutout of the container and give that pane overflow-x: auto in order to show a scrollbar when necessary
<div class="pane">
<div class="container">
<p class="column">Lorem ipsum dolor sit amet, ...</p>
<div class="column">Lorem ipsum dolor sit amet, ...</div>
<div class="column">Lorem ipsum dolor sit amet, ...</div>
<p class="column">Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
.pane {
width: 100%;
height: 380px;
overflow-x: auto;
}
.container {
width: 1250px;
max-height: 350px;
}
.container .column {
display: inline-block;
width: 300px;
}
See JSFiddle
I have a 100% width table containing several cells. I want one of this cells to always show its contents in one line white-space: nowrap and to display an ellipsis at the end of the line if the contents exceed the table cell text-overflow: ellipsis.
The problem i have is that the table will stop contracting it's with when reaching the cells content. So the minium width of the cell will allways be the width of its content instead the table will be pushed out as a whole.
I just can't figure out how to solve this:
My HTML:
<div class="otrCompactView">
<div class="otrLastEditTable">
<div class="otrLastEditRow">
<div class="otrLastEditor">LastEditor</div>
<div class="otrLastEdited">LastModified</div>
</div>
</div>
<div class="otrTitleRow otrRow">
<div class="otrTitle">Title asdasdasdas asd asd asd asdas as asd </div>
</div>
<div vlass="otrTaskRow otrRow">
</div>
<div class="otrColumnsRow otrRow">
<div class="otrColumns"></div>
</div>
</div>
My CSS:
.otrCompactView {
display: table;
background: yellow;
width: 100%;
height: 100%;
}
.otrRow {
display: table-row;
}
.otrLastEditTable {
display: table;
width: 100%;
}
.otrLastEditRow {
display: table-row;
}
.otrLastEditor {
display: table-cell;
}
.otrLastEdited {
display: table-cell;
text-align: right;
}
.otrTitle {
border: 1px dotted red;
min-width: 50px;
white-space: nowrap;
}
And a fiddle for direct testing:
http://jsfiddle.net/67B6G/
Does this look like what you're after?
updated
HTML
<div class='table'>
<div class='row'>
<div class='cell'>Something quite long</div>
</div>
<div class='row'>
<div class='cell'>
here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.
</div>
</div>
</div>
CSS
.table{
margin:0;
padding:0;
display:table;
table-layout: fixed;
width:100%;
max-width:100%;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
border:1px solid grey;
}
.cell:last-child{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
Here's a way to do it without using table-layout: fixed that allows you to keep dynamic widths with jQuery.
HTML:
<div class="table">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="right">Lorem Ipsum</div>
</div>
In the CSS, you use your standard ellipsis code but add max-width: 0 (as explained here with respect to actual table elements):
.table {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
padding: 0 5px 0 5px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
If you stopped there, you'd end up with each child div taking up 50% of the total width of the parent div, so you still wouldn't have fit-to-content dynamic widths. To remedy this, I adapted this code, which calculates the width of the text in an element, to calculate the width and then use that to dynamically set the width of the right column. The left column will then have the ellipsis.
// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('.right').on('input', function() {
var $width = $(this).textWidth(); // Get width of text
$width += 10; // Add left and right padding
$(this).width($width); // Set width
}).trigger('input');
Note that the above code requires you to take padding into account; otherwise, the right column will have an ellipsis as well. Here's a fiddle.
To use this in a table with multiple rows, you could modify the jQuery iterate over the cells in a column and set the width of the column to the requisite width of the widest cell in the column. Or, if you know which one is the widest, you can just direct the jQuery to get the width of that.