I'd like to cleanly display a string shortened by an ellipsis in quotation marks for example, the string a long sentence that shouldn't be fully displayed shown as "a long sentence...".
However, when I use the ellipsis provided by text-overflow: it will render as "a long sentence... ". What may be done to remove the extra space included in the ellipsis?
Example taken straight from here: text-overflow
I removed the padding on paragraphs. As you can see there is no "extra space"
p {
width: 200px;
border: 1px solid;
padding: 0;
/* BOTH of the following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
}
.overflow-visible {
white-space: initial;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
/* Not supported in most browsers,
see the 'Browser compatibility' section below */
text-overflow: " [..]";
}
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Related
I made a scroll to top button that appears when the user scrolls down 25px from the top of the document (otherwise it's not visible) thanks to JavaScript following a tutorial because I still don't know anything about this programming language.
However, I would like it to be visible only on desktop websites and not also on mobile.
I tried using media queries but they don't work since JavaScript has control over the visibility of the button.
What function can I integrate to manage everything with JS?
Here is the code I'm using.
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
There is a JS way to detect if a media query is matched: this is done by using window.matchMedia(). Then it is a matter of adding the appropriate media query to matchMedia() function, and then checking the .matches property in your if block:
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
const matchesMediaQuery = window.matchMedia('(min-width: 600px)');
if (matchesMediaQuery.matches && (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25)) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
scrollFunction();
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Just Add this css in your css file or if you are using bootstrap then add bootstrap media query to disable display in mobile
#media only screen and (max-width: 600px) {
#to-top-container {
display: none;
}
}
You don't need javaScript to do it, you should have used the "a" tag to jump to other pages. But the "a" tag can also jump to an element on the same page.
As defined in the HTML specification, you can use href="#top" or href="#" to link to the top of the current page.
The #media query is set to max-width: 600px - adjust the max-width to fit your needs.
html {
scroll-behavior:smooth;
}
body {
position: relative;
}
.section {
height: 100vh;
background: #dedede;
margin-bottom: 20px;
font-size: 100px;
}
.scroll-container {
position: absolute;
top: 0;
right:0;
height: 100%;
}
.scroll-container:before {
content: '';
display: block;
height: 100vh;
pointer-events: none;
}
.scroll-container a {
position: sticky;
top: 88vh;
cursor: pointer;
font-size: 20px;
}
#media (max-width: 600px) {
.scroll-container a {
display: none;
}
}
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="scroll-container">
To Top
</div>
This question already has answers here:
Generating ellipsis AND "Read more" link with CSS
(3 answers)
Closed 2 years ago.
I have a text that I have truncated using the css - height and overflow property.
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary {
height: 47px;
/* adjust based on line-height * rows desired */
overflow: hidden;
}
.ellipsis {
height: 0;
}
.ellipsis span {
background: white;
padding-left: 0.5em;
position: relative;
top: -1.2em;
left: 3.2em;
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<strong>testststststs</strong>
</div>
<div class="ellipsis"><span>... Read more</span></div>
</div>
however my issue is when I try placing the "...read more" using he position relative property it does not work: ex below:
http://jsfiddle.net/ctges45w/3/
As you can see the above fiddle the text is floating in middle of the sentence.
http://jsfiddle.net/ctges45w/5/
how can I make sure that the "read more" text always get placed at the end of the line where its truncated regardless of the width of the content?- something like this:
http://jsfiddle.net/ctges45w/4/
I have tried looking up at sources on stack overflow with similar issue and those havent or partially worked for me: ex here:how to place " ...view more " text next to the truncated sentence in a container-Javscript
any ideas?
Forget all the relative positioning. Just simply put the readmore at the end of the text and style it as you wish.
let summary = document.querySelector('.summary')
if (summary.textContent.length > 100){
let truncated = summary.textContent.substring(0, 100)
summary.innerHTML = `<p style="margin:0;">${truncated}<span class='ellipsis'>... Read more</span></p>`
}
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary{
overflow: hidden;
height: 47px;
padding: 0;
}
.ellipsis{
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
<span class="ellipsis">... Read more</span>
</p>
</div>
</div>
Is there any way to set width of a <div> using a conditional operator on the size of text within it?
For example, if there are 60 characters or less, width should be 500px else, 700px.
This works fine upto some extent:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
display:block;
min-width: 600px;
margin: 2px;
text-align: left;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
Output:
But, when I increase the number of characters of the first child <div>, I get this:
I want all the container elements to shift down once an element crosses a specific character limit, say, 60 characters.
EDIT:
What I wanted is this:
(image)
You could more easily do this with CSS Grid than with flexbox layout; here we take advantage of the minmax() function to determine the column width (bearing in mind we're explicitly styling the whole column, not just the specific 'cell' of content):
grid-template-columns: repeat(2, minmax(min-content, 700px));
Here we use the repeat() function to create two columns, each column assigned a minimum width of 500px or a maximum width of 700px.
This gives the following output:
.flex-container {
display: grid;
grid-template-columns: repeat(2, minmax(500px, 700px));
grid-template-rows: repeat(2, 1fr);
}
.flex-container>div {
white-space: nowrap;
overflow: hidden;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
References:
minmax().
repeat().
"Basic concepts of grid layout."
You can do this with jQuery. Run a loop and check all the element, and if one of the element has more than 60 character you apply a width to all of them.
var elem = $('.flex-container > div');
for (var i = 0; i < elem.length; i++) {
if (elem.eq(i).text().length > 60) {
elem.css('width', '600px');
break;
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container>div {
display: block;
min-width: 300px;
margin: 2px;
text-align: left;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ips </div>
</div>
You can resolve this with JavaScript, using the string length property and a condition.
1) Create a variable in JavaScript to access the div you created using : document.getElementsByTagName("div").innerHTML;
2) Use the if. In the condition use the length property and a compactor to see if the length is bigger then a certain number of characters.
3) In the statements add document.getElementsByTagName("div").style.width = x; and modify the width by the number you want by changing x.
Using a conditional operator, you've set the size of a div depending on the size of text.
I am trying to make a onClick() button that when pressed, makes text show. My issue is that when I click the button, the button scoots down when the text shows up.
Is there a way to make the button not move when the text appears? Maybe make it actually be there but hidden and on button unhide it? I don't know, I just don't want it to move when the button is pressed.
angular.module('starter.controllers', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.flip = function() {
$scope.coinResult = "Heads";
}
})
<body ng-app="starter">
<head>
<style>
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<ion-content>
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult"></p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
</ion-content>
</body>
One way would be to fix the height of the text div coin-result and give it overflow-y: auto. This ensures that the button stays put.
Demo below:
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
height: 100px;
overflow-y: auto;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
Let me know your feedback on this. Thanks!
I am working on a TV application with JavaScript, Html and CSS.
I want to generate buttons where the label(title) is not always the same: sometimes so long or quiet short. The labels should be dynamically generated from xml files. So the problem is to display all the generated buttons with the same width.
Here is how I am creating the buttons with javascript:
var a = document.createElement("a");
var span2 = document.createElement("span");
span2.setAttribute("class", "span1");
span2.appendChild(document.createTextNode(text));
a.appendChild(span2);
How we can do it?
Here's an option:
When you get your set of button labels, get the length of each string.
Determine how wide the buttons need to be based on the number of characters in the longest string.
When you build each span2, give it a width attribute equal to that largest size.
However, be aware that if you have some very long labels and some very short, it may look weird having the really short labels on very wide buttons.
I don't know exactly what you are trying to do but here is one example how to make the buttons with same width and having different character length :)
var words = ['Lorem', 'Lorem ipsum', 'Lorem ipsum dolor', 'Lorem ipsum dolor sit', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet consectetur', 'Lorem ipsum dolor sit amet consectetur adipisicing', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga animi'];
for (var i = 0; i < 10; i++) {
var a = document.createElement("a");
var span2 = document.createElement("span");
span2.setAttribute("class", "span1");
span2.style.width = 150 + "px";
span2.appendChild(document.createTextNode(words[i]));
a.appendChild(span2);
document.body.appendChild(a);
}
.span1 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: lightblue;
margin: 5px;
vertical-align: middle;
padding: 5px;
border-radius: 5px;
color: #fff;
}
Thanks a lot for your ideas and comments :)
I decided to make some thumbnails and I will query the buttons title :) At least I am sure now that I will get a list of buttons with fixed width.
Thanks a lot for your kind help :)