When I have a paragraph with text-align:justify, the spacing between words can become uneven due to certain words. I used to rely on the property text-justify:newspaper; which helped break up the words for more evenly spaced text, but unfortunately, it is only supported by IE. Are there any alternatives to achieve this effect in other browsers?
Alternatively, what is the best way to justify text without relying on the text-justify:newspaper; property.
HTML :
<div class="pad1" style="width:190px;">
<h2 class="center">Discover the Reason</h2>
<p style="word-spacing: 2px;">Our unique approach involves seamless communication between our clients and execution team. Once a project request is received, it is promptly entered into the system and assigned a project code.<b></b></p>
<div class="wrapper center">
<a class="button" href="users/About#reason"><span><span><font style="margin-top:1px;"><cufon class="cufon cufon-canvas" alt="Learn More" style="width: 51px; height: 20px;"><canvas width="63" height="25" style="width: 63px; height: 25px; top: -3px; left: -1px;"></canvas><cufontext>Learn More</cufontext></cufon></font></span></span></a>
</div>
</div>
You could consider using word-spacing: 2px; instead of
text-align: justify; text-justify: newspaper;When using the text-justify: newspaper setting, words are not broken apart; instead, extra spacing is added between letters of a word to achieve justification. Most browsers do not support this feature (except IE), which means there is limited control over the justification process. Typically, additional spacing between words is the only result.
To improve the appearance of justified text, it's recommended to enable word hyphenation in browsers. This helps reduce the need for excessive spacing. One popular method for achieving hyphenation across different platforms is by implementing JavaScript-based hyphenation on the client-side, such as utilizing Hyphenator.js.
Give this a shot, it helps control the spacing to prevent word separation.
.aligned{
text-align: justify;
word-spacing: -1.5px;
}
<p class="aligned">Lorem ipsum</p>
To address your specific situation, the most effective approach would be to maintain text-align:left; while also setting a fixed width (either in percentage or pixels) to achieve your desired outcome.
For Example,
element.style {
text-align: left;
width: 250px;
}
Hopefully, this explanation is beneficial for you.
Please note: the value of width: 250px; is just an example. Feel free to adjust it based on your own requirements.
I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...
When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>— Big Data Borat (@BigDataBorat) & ...
I need to prevent a form submission based on the result of an ajax request... Here is the code I attempted to implement: The chreg() function is supposed to return a boolean value from the ajax request, but it's not working! Javascript: function ch ...
When I use IE to enter text into a CodeMirror-line text box, the text disappears when I try to save it. I have attempted using JavascriptExecutor to write to the CodeMirror, but it seems to only be for visual purposes. How can I input text into the code mi ...
Is there a way to use paragraph breaks without any space at the top or bottom when there's no text above or below it? body { font-family:arial; background:#222; } #wrapper { width:100%; margin-top:100px; } .post_container { ba ...
I'm working on a page that will display "no query string" if $_REQUEST is null, and if not, it will show a page with the content saying "query string". Additionally, it should output the line "The query string is: var_dump($_REQUEST)". I've writt ...
My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...
Despite trying various techniques recommended by fellow Stackoverflow users who faced similar issues, I still encountered a problem where the text appeared below the image even after applying the suggested methods to my code. I also experimented with a me ...
I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...
I have received the following JSON data: [ { "fields": { "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n", "track_name": "Lion City ", "release_id": 560783, ...
In the process of creating a long bootstrap card containing two rows of information including a title and description, I encountered an alignment issue with the button. The button is intended to be aligned to the right of the card while remaining centered. ...
One of my challenges is working with a dynamically created dropdown in HTML and having a dictionary in the back-end to retrieve keys. As users keep adding options to the dropdown, I face the issue of not having a value attribute like this: <option valu ...
My current dilemma involves the zurb foundation framework, specifically with the .row class being set to a max-width of 61.25em, which is equivalent to 980px in width. The problem I am facing is that when I resize the browser and it reaches 1024px wide, t ...
I am currently utilizing the Angular UI Bootstrap accordion feature, which can be found here. <div ng-controller="AccordionDemoCtrl"> <div accordion close-others="oneAtATime"> <div accordion-group heading ...
While doing some research, I came across an issue. I have a page called specifications.html with three links: details.html?id=1, details.html?id=2, and details.html?id=3. My goal is to display the details of each link when someone clicks on it. For examp ...
I am facing a challenge in setting the height of a parent ul element based on the included li's. The issue arises when the CSS property line-height contains fractional digits, causing inaccuracies in the calculation. This results in the calculated hei ...
On my website, I have a background image set. However, I noticed that when viewing it on a mobile device, the background image appears in different sizes on different pages, even though they are all linked to the same stylesheet and use the same code. You ...
While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...
I've tried searching for it online, but unfortunately, I couldn't find any helpful results. What I'm attempting to achieve is a mixin that can lighten or darken a color based on a given percentage. If the percentage is less than 0, then I w ...
In a recent project of mine, I implemented a range slider with two thumbs - one for setting the minimum value and one for the maximum value. The goal was to provide users with a visual representation of the range they are selecting by displaying the thumb ...