Home Web Front-end CSS Tutorial How css solves the problem of text compatibility under different browsers

How css solves the problem of text compatibility under different browsers

Apr 03, 2020 am 09:01 AM
css Browser

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:

How css solves the problem of text compatibility under different browsers

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;
}
Copy after login
Copy after login

html

<div class="test-justify">
       测试文本
</div>
Copy after login

How css solves the problem of text compatibility under different browsers

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:

How css solves the problem of text compatibility under different browsers

(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;
}
Copy after login
Copy after login

How css solves the problem of text compatibility under different browsers

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;
}
Copy after login

html

<div class="w2">测试</div>
<div class="w3">测试了</div>
<div>测试来了</div>
Copy after login

How css solves the problem of text compatibility under different browsers

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>
Copy after login

css

.test-justify {
    text-align: justify;
}
span {
    display:inline-block;
    padding-left:100%;
}
Copy after login

How css solves the problem of text compatibility under different browsers

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>
Copy after login

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%;
}
Copy after login

html

<div class="test-justify">
    测试文本
</div>
Copy after login

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" });
Copy after login

How css solves the problem of text compatibility under different browsers

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" })
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

HTML: The Structure, CSS: The Style, JavaScript: The Behavior HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

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.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

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.

Laravel8 optimization points Laravel8 optimization points Apr 18, 2025 pm 12:24 PM

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.

How to simplify CMS development with Composer: Practical application of the Lebenlabs/SimpleCMS library How to simplify CMS development with Composer: Practical application of the Lebenlabs/SimpleCMS library Apr 18, 2025 am 09:45 AM

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.

Which 2025 currency exchanges are more secure? Which 2025 currency exchanges are more secure? Apr 20, 2025 pm 06:09 PM

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.

What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? Apr 19, 2025 pm 02:21 PM

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. �...

How to learn iaravel How to learn iaravel Apr 18, 2025 pm 12:21 PM

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.

How to correctly generate and display the WeChat applet with parameters QR codes in Java? How to correctly generate and display the WeChat applet with parameters QR codes in Java? Apr 19, 2025 pm 04:48 PM

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...

See all articles