I want to limit the display to only 2 lines of text and hide 'University of Hong Kong'.
https://i.sstatic.net/ALKMh.png
contentTitle___1tY09 {
margin: 0 0 0 1.2rem;
font-size: 1.1rem;
line-height: 1.2rem;
display: inline-block;
width: 100%;
color: #484848;
text-transform: capitalize;
}
.blue-back {
background-color:#0000ff2b;
}
.blue-back p.mb-0 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.row .col-md-4:last-child .blue-back {
background-color:red;
}<div class="row">
<div class="col-md-4">
<div class="blue-back" style="width: 50px;">
<p class="mb-0 text-center text-white">Fase</p>
<p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">kjshasjkhklahfsjkfdsf dsfsdfsdfsdnfds fdsfsdfdsjfdkfnds </p>
</div>
</div>
<div class="col-md-4">
<div class="blue-back">
<p class="mb-0 text-center text-white">Fase</p>
<p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
</div>
</div>
<div class="col-md-4">
<div class="blue-back">
<p class="mb-0 text-center text-white">Fase</p>
<p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
</div>
</div>
</div>I recently started learning BootStrap and delving into web development. Despite watching numerous video tutorials and reading the documentation, I am still struggling with layout issues – something isn't quite clicking for me. My goal is to create ...
As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory. Upon attempting to incorporate my components int ...
I currently have the following structure: <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> Using jQuery, I am trying to create a new <div class="fo ...
Team, I am facing an issue with my code that previously pulled table data correctly. The webpage has been updated with several new codes, resulting in pulling different table data during my work. My goal is to extract the first image table while excluding ...
I am having trouble displaying an image in the browser. My HTML code is simple and straightforward, but for some reason, the image is not showing up. I placed the image in a folder named "image" and it worked when I tried the same code in a different folde ...
I'm uncertain whether the issue lies with the newly updated Firefox 35.0 or with my code. However, within a web application I utilize the following to establish a high-resolution (cached) background image behind the user interface. Starting today, aft ...
I am completely new to this and trying to figure things out. My main aim is to design a dropdown menu within my navigation bar that displays different themes, allowing users to change the color theme of the page by clicking on an element. I have organize ...
My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...
Why isn't my jVectorMap adjusting to the new height I've specified for the containing div? It only displays at the default height of 54px. Within a document.ready function in my scripts.js file, I have the following code: $('#team-map-usa& ...
I've been using the jQuery function .load() to load a page and I'm trying to find a way to access HTML elements within the loaded page from the source page once it's finished loading. The only method I've come across so far is to add pa ...
I am facing an issue with my web page that has around 10 Google Analytics charts. I want to trigger a print dialog box once the page is fully loaded, including all the charts and JavaScript. Currently, the problem is that the print dialog box opens after t ...
This data is extracted from the database. When you click on it, it should download as the file name: https://i.sstatic.net/hEEGP.png Below is my code for uploading the image: if(isset($_POST['submit'])) { include 'db1.php'; if(co ...
Whenever I try to scroll to a specific item in the list, clicking on it causes the entire view to scroll instead. Is there a way to ensure that only the div containing the list scrolls? <AlertsList> {productInventoryAlert?.map((prod ...
I found this tutorial on how to implement a simple dialog. The issue I'm facing is that the dialog appears empty with no errors in the console. Even after making changes to my dialog.component.html or dress-form.ts, nothing seems to reflect in the o ...
I'm a beginner in the world of html/css and was tasked with creating a html webpage. I set a specific font-size for my webpage, only to be surprised when my browser (Google Chrome) adjusted it on its own. Even though I specified the font-size as 14px, ...
My method of replacing a specific word in text works like this: document.body.innerHTML = document.body.innerHTML.replace(/katt/g, "smurf"); However, when I try to replace an image URL in HTML using the same line of code, it doesn't seem to work. H ...
Wondering if there is a way to target a CSS element that is the first child of its parent, taking text nodes into account? I need to adjust the top margin of a heading only if it is at the very top of its parent container. When I try using the following co ...
I have a traditional PHP/Smarty Website setup. It consists of an index.php home base and a templates folder containing .tpl Files. The key templates include header.tpl, footer.tpl, index.tpl, and subpage.tpl. Both index.tpl and subpage.tpl include the hea ...
I have attempted to use the following regex to validate against the criteria listed below, but it seems to fail in certain cases. Can you help me identify what might be wrong with my approach? Regular Expression: /[a-z]|\d|\_{4, 16}$/.test(user ...
The modal is not displaying the content when the button is clicked. It only shows the modal and the "x" icon, but not the modal content. HTML CODE: <!-- The Modal --> <div class="modal"> <!-- Modal content --& ...