


How css solves the problem of text compatibility under different browsers
Goal:
css enables compatible text alignment under different browsers.
In the front-end layout of the form, we often need to align the prompt text of the text box at both ends, for example:
Solution process:
1. The first thing that comes to mind is whether the problem can be solved directly with css
css
.test-justify { text-align: justify; }
html
<div class="test-justify"> 测试文本 </div>
Okay, text -align:justify was completely ineffective, and I was unwilling to accept it, so I tested it with a piece of text. The effect is as follows:
(Recommended tutorial: CSS tutorial)
It turns out that this attribute is for aligning both ends of the paragraph text, then try text-align-last: justify this attribute
css
.test-justify { text-align: justify; }
The effect is achieved, but the disadvantage is that it is completely incompatible with IE and Safari browsers.
2. Then think about it, since the above implementation has compatibility issues, can you write separate css classes for 2, 3, 4, etc. texts of such length, because the text box prompt text of the form is also Not a lot.
css
div { width: 100px; } .w2 { letter-spacing: 2em; } .w3 { letter-spacing: 0.5em; }
html
<div class="w2">测试</div> <div class="w3">测试了</div> <div>测试来了</div>
This solution seems to be able to solve the problem and should be fine for most scenarios, but Unfortunately, it is not really aligned at both ends, and it still cannot meet the needs in special display cases. We will leave it alone and continue to try.
2. The above is a pure css implementation. Next, let’s see if the combination of css and dom can create a unified solution.
html
<div class="test-justify"> 测 试 文 本 <span></span> </div>
css
.test-justify { text-align: justify; } span { display:inline-block; padding-left:100%; }
Think about it, it’s a little exciting, and it’s perfectly compatible with IE and Safari. This solution In fact, it is an extension of the first paragraph alignment scheme, using spaces to force word segmentation, and then using span to fake the last line (test-justify will not align the last line).
In order to increase scalability, we have to optimize this solution, because in most cases the text is loaded on the backend.
For example: How to write .net core razor view loading model displayname
<label asp-for="Email"></label>
Just add a small piece of js and it should be compatible with all scenarios.
css
div { width: 300px; border: 1px solid #000; } .test-justify { text-align: justify; } span { display:inline-block; padding-left:100%; }
html
<div class="test-justify"> 测试文本 </div>
js
var $this = $(".test-justify") , justifyText = $this.text().trim() , afterText = ""; for (var i = 0; i < justifyText.length; i++) { afterText += justifyText[i] + " "; } afterText = afterText.trim() + "<span></span>"; $this.html(afterText).css({ "height": $this.height() / 2 + "px" });
Okay, this solution should work It supports mainstream browsers, but the disadvantage is that it is re-adjusted through js, so when you refresh it, you will see the process of aligning both ends of the text (flash). The experience is not very good, so make it compatible.
Only IE and Safari do not support text-align-last: justify so call the last solution only considering these two browsers
function myBrowser() { var userAgent = navigator.userAgent; //判断浏览器版本 var isOpera = userAgent.indexOf("Opera") > -1; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1); if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) { return "Firefox"; } else if (isIE) { return "IE"; } else if (isEdge) { return "IE"; } else if (isIE11) { return "IE"; } else if (/[Cc]hrome\/\d+/.test(userAgent)) { return "Chrome"; } else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) { return "Safari" } else { return "unknown" } } var browser = myBrowser(); if (browser == "IE" || browser == "Safari") { var $this = $(".test-justify") , justifyText = $this.text().trim() , afterText = ""; for (var i = 0; i < justifyText.length; i++) { afterText += justifyText[i] + " "; } afterText = afterText.trim() + "<span></span>"; $this.html(afterText).css({ "height": $this.height() / 2 + "px" }) }
Done!
Recommended video tutorial: css video tutorial
The above is the detailed content of How css solves the problem of text compatibility under different browsers. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

Laravel 8 provides the following options for performance optimization: Cache configuration: Use Redis to cache drivers, cache facades, cache views, and page snippets. Database optimization: establish indexing, use query scope, and use Eloquent relationships. JavaScript and CSS optimization: Use version control, merge and shrink assets, use CDN. Code optimization: Use Composer installation package, use Laravel helper functions, and follow PSR standards. Monitoring and analysis: Use Laravel Scout, use Telescope, monitor application metrics.

When developing a new content management system (CMS), I encountered a common but difficult problem: how to quickly build a fully functional CMS without adding too much complexity. There are many ready-made CMS solutions available on the market, but they are often too large and complex to configure and can be a burden for small projects. After some exploration, I discovered the lebenlabs/simplecms library, which provides a simple and efficient solution through Composer.

The top ten safe and reliable exchanges in the 2025 cryptocurrency circle include: 1. Binance, 2. OKX, 3. Gate.io (Sesame Open), 4. Coinbase, 5. Kraken, 6. Huobi Global, 7. Gemini, 8. Crypto.com, 9. Bitfinex, 10. KuCoin. These exchanges are rated as safe and reliable based on compliance, technical strength and user feedback.

The browser's unresponsive method after the WebSocket server returns 401. When using Netty to develop a WebSocket server, you often encounter the need to verify the token. �...

The steps to learn Laravel are: Have basic knowledge of PHP. Install the Laravel framework. Learn about Laravel architecture. Learn basic syntax: route, controller, view, model. Build a small application practice framework for use. See the official documentation for detailed guidance. Join the community to exchange experiences and seek help. Stay updated and pay attention to new features.

Generating a WeChat applet QR code with parameters in Java and displaying it on an HTML page is a common requirement. This article will discuss in detail how to use J...
