I have problem with adding 3 dots on the end of div. I my text is too long and don;'t have enough space to display, on the of div I want to display 3 dots.
I know for text-overflow ellipsis but now workig correct on IE and Firefox.
Is it possible to do on another way.
https://jsfiddle.net/kq1Lp6og/
I want to create ease in CSS, but don't know how without ellipsis.
HTML
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSS
div{
height:38px !important;
overflow: hidden;
}
div {
max-width:100%;
height:38px;
overflow: hidden;
position: relative;
line-height: 1em;
max-height: 3em;
text-align: justify;
padding-right: 1em;
font-size: 20px;
}
div:before {
content: '...';
position: absolute;
right: 2px;
bottom: 0px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I know you asked for CSS, but you may (or future readers may) not want CSS: it doesn't update when window size changes and it's not a very good nor flexible nor easy method to have "...", I had the same problem that I tried to fix with CSS and I finally use a JS library called dotdotdot.
PS : please do not dislike because it doesn't match all the criteria, I had exactly the same problem and I understood that CSS isn't necessarily the best option (for user experience and developer) so it's important that you know all the option you have.
Related
<pre style="overflow-x: auto; width:100%">
Will never scroll.
</pre>
<pre style="overflow-x: auto; width:500px">
Will scroll but is not of responsive design.
</pre>
I want to have a pre-element that will be more responsive in direct relation to the parent element, but the parent element has no fixed width. Using width:100vw or even something like width: calc(100vw - 300px) is not an option because the site has too many dynamic elements. I would like to accomplish this with CSS alone. Is this an issue I am only going to be able to resolve with JavaScript?
Update:
It appears that overflow-x: auto does not work unless you use a static width. In my case everything (including parent elements) is responsive, nothing is set to a static width. I solved the problem by just using overflow-x: scroll
The question in incorrect in stating that width: 100% will result in never scrolling, as can be seen in the following examples. All of the pre tags have width: 100%.
You may have had an issue with width: 100vw because 100vw is not the same as 100%. 100vw is equal to the width of the viewport, but 100% width is the width of the nearest parent element. In the bottom two examples, 100% width is the width of their respective divs, and will be responsive.
pre {
overflow-x: auto;
width: 100%;
}
#medium-container {
padding: 10px;
width: 500px;
border: 1px dotted red;
}
#small-container {
padding: 10px;
width: 250px;
border: 1px dotted blue;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
<div id="medium-container">
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
</div>
<div id="small-container">
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
</div>
I'd like everything to say on one line even if the row is wider than the width of the screen and if I want to access the later elements I just have to use the scroll of the screen to get righter.
I tried this:
CSS:
.sth{
display: inline-block;
overflow-x: scroll;
}
It doesn't work, can someone help please?
Thanks :)
Is this what you are tying to achieve?
div {
max-width: 100%;
overflow-x:scroll;
white-space: nowrap;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I am trying to add spacing between each line on my header. Some of the letters seem to overlap while others are very close to the next line. I tried adding padding but that is adding padding around the whole text rather than each line. Any help will be appreciated.
JSFiddle Demo
You are probably looking for the line-height css verb:
line-height: 1.6em;
https://jsfiddle.net/L1jch0Lf/3/
See the documentation at MDN.
You can use unordered list for something like that. I highly suggest not using regular text, since I believe you're actually going to have some real elements behind it.
#box {
width: 500px;
border: 1px solid #000;
}
ul {
list-style: NONE;
padding: 0;
margin: 0;
}
<div id="box">
<ul>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
<li>Text</li>
</ul>
</div>
line-height:150%;
The default line height in most browsers is about 110% to 120%
or
line-height: 30px;
or
line-height:1.5;
I basically want a picture on the left and text on the right. It's actually sort of working already. The problem is if the text were any longer, instead of the text breaking into lines, the whole string just goes below the image. These are my simplified HTML/CSS structures:
.course-profile {
min-width: 300px;
padding:18px;
margin: 5px;
margin-top: 15px;
height: 350px;
}
.course-profile img, .course-profile p.profile-name {
display: inline-block;
vertical-align: middle;
}
.course-profile img {
width:75px;
height:75px;
margin-right: 5px;
}
<div class="col-sm-12">
<div class="row">
<div class="course-profile col-sm-4">
<a href="">
<img src="http://lonestarmediasa.com/wp-content/uploads/2014/11/smiley-face-clip-art15.jpg" class="img-responsive img-circle"/>
<p class="profile-name">Let's make this a slightly long sentence hahaha. This is a simplified version of my code.</p>
<p>Other stuff not inline.</p>
</a>
</div>
</div>
</div>
I tried reading through docs and through SO, trying things like floats (which mess up the parts not inline), word-wraps/word-breaks, etc. But none have succeeded. This problem seems like it should be easy, but I can't figure it out. :/
I think you want to float the image to the left (or right). This is actually what float was designed to do, float an image in a block of inline text. Most things that we use float for these days was originally unintended use.
.left {
float: left;
}
.right {
float: right;
}
.clear:after,
.clear:before {
content: " ";
display: table;
float: none;
clear: both;
}
.img {
width: 100px;
height: 100px;
display: inline;
background: red;
margin: 15px;
}
.description {
display: inline;
}
<section class="clear">
<div class="img left"></div>
<p class="description">Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<section>
Note that because we are floating things we need to make sure we are also cleaning up after ourselves by clearing things afterwards with the clear: both; declaration. The clearfix I used was inspired by Nicolas Gallagher's micro clearfix hack
I have a span that will contain text. I would like the span to expand to a maximum of 500px to accommodate the text inside. After the max is reached I would like the text to display ellipses for any text overflowing the max-width. Is this possible? I tried the following, but this did not do the trick.
Thanks
{
position: absolute;
top: 13px;
left: 44px;
max-width: 500px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Spans are display:inline by default, which can cause odd behavior when dimensions are assigned to it. If it's being positioned absolutely anyway, you should use a div or set the span to display:block instead.
I'm not sure if this will fix your problem, but it's a start :)
This is an interesting article about getting ellipsis to work on all modern browsers without using javascript.
This javascript will truncate your text and add an ellipsis. (Without breaking it in the middle of a word or markup)
Barelyfitz Truncate js.
Not sure on the browser compatibility of i, but it should work :)
Hope it helps.
This worked for me
display: inline-block; // This is what you're missing
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.elipsis {
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
<span class="elipsis" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>