If the div has a width of 300px, how can I adjust the font size of the text so that it always occupies 100% of the width? The challenge is that the text lengths vary due to dynamic titles generated by PHP. Smaller texts need to have much smaller fonts than longer texts.
That solution worked like a charm for me
div {
text-align: justify;
}
div:after {
content: "";
display: inline-block;
width: 100%;
}
However, I had to manually set the height of my element when using this method to prevent an extra empty line.
I found this helpful tip on Force single line of text in element to fill width with CSS
You can also check out more details here:
After implementing @svassr's suggestion along with utilizing font-size: *vw, I was able to achieve the desired outcome. Here is the updated code:
div {
text-align: justify;
font-size: 4.3vw;
}
div:after {
content: "";
display: inline-block;
width: 100%;
}
The usage of vw in the above snippet refers to the viewport width, specifically setting the font size to 4.3% of the viewport width. Experiment with this value to ensure your text fits on a single line. Thanks to @svassr's solution, this approach worked perfectly for me!
It seems like what you're looking to achieve may not be possible. Using text-align:justify will align paragraph text to the right side, but adjusting the width of a header to be 100% is not feasible.
Update: However, there is a JavaScript library that claims to accomplish this. You can check it out at . Nevertheless, no solution using pure CSS currently exists for this particular issue.
I have developed a unique web component dedicated to this purpose. If you're interested, you can find it here:
https://github.com/pomber/full-width-text
Feel free to explore the live demo as well:
To utilize this component, simply follow this format:
<full-width-text>Enter your text here</full-width-text>
I have created a simple scaling function using CSS transform instead of relying on font-size.
Check out the blog post for more details:
Here is the code snippet:
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
View the working demo here: https://codepen.io/maciejkorsan/pen/BWLryj
One solution to avoid the extra line issue is by incorporating margin-bottom into the div styling.
(This example uses SCSS)
div {
text-align: justify;
margin-bottom: -1em !important;
&:after {
content: "";
display: inline-block;
width: 100%;
}
}
Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...
I've been working on a project at , where you can click on a small map to expand a larger map below it. However, I noticed that when you scroll down to the large map and then try to close it using the button at the bottom, the content on the page jum ...
Trying to understand the default HTML rules for element stacking order. Are there any restrictions regarding the order of parents and children or sibling elements in a single row? Or is it solely dependent on CSS? For clarification, consider this example ...
Currently, I am working on a project and encountering an issue that is causing some difficulty: In order to create a navigation bar with equally distributed list elements based on the number of items, I am utilizing ng-repeat for data binding and Sass for ...
Here's the challenge: create a full window svg image with aspect distortion without using an SVG tag. Why avoid the SVG tag? Because I plan to replace the SVG later on (possibly frequently) and haven't found a simple way to do so. Previous attem ...
How can I create a smooth transition between my HTML font and background using CSS? I want to gradually change the color of a bold font pixel by pixel to match the background color. For example, white font on a black background. How can I achieve this smo ...
Is there a way to render a box on another box's border, similar to the example image here: Expected Output I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution. If you have any advice or suggestio ...
Could someone please clarify why the CSS pseudo class :read-only is being added to elements that are not actually readonly? To see an example, check out this link I have tested this in recent versions of Edge, Chrome, and Firefox. All of them apply the i ...
I am experiencing difficulty in getting my HTML page to scroll properly. Despite trying various CSS properties for Overflow (such as scroll, auto, visible, etc.), I have been unsuccessful in making the page scrollable. It seems like there might be a simpl ...
https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...
I'm currently facing an issue with the sticky header style in my data table. I have created a simple Angular component along with a specific directive: sticky.directive.ts @Directive({ selector: '[sticky]' }) export class StickyDirecti ...
Can someone assist me with the following code snippet? <script type="text/javascript"> $(function () { $(".a").live("click", function () { var $this = $(this), ProductImageId = $this.data('ProductImageId'); ...
I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have ...
For a current project I am working on, my goal is to fill the entire .container with 7 columns within my grid system. To achieve this, I plan on adjusting the Less variable (@grid-columns) before compiling a bootstrap.css file at http://getbootstrap.com/cu ...
I have written the following code snippet: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...
A script containing dynamic HTML content is sourced from an external website, injected by RSS feeds. To access the content directly, visit this link. The script needs to be wrapped around HTML tags for front-end display. For example: <div>http://fe ...
Incorporating Angular-5 into my project has introduced a plethora of animations on various pages. While the utilization of jQuery provides a straightforward approach for adding and removing classes to DOM elements, it is frequently advised against using jQ ...
I'm having an issue with adding a fade effect to the text on my icons in the navigation bar. I've almost got it working, but it keeps displaying "home" for each icon instead of the correct text. Can anyone help me fix this? Live Example https:// ...
My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...
After researching extensively, I am eager to use a plugin that combines jQuery and flash to record a video using the system's Webcam. I came across scriptcam, but unfortunately, I encountered an issue where the plugin hangs on document load and the li ...