JSFiddle - React, Tailwind, and code Playground

by Sivan

HTML

<h3>传统text-indet替换技术</h3>

<div class="wrapper">
    <div class="foo old-ir">Inline block</div>
    <div class="foo old-ir">Inline block</div>
</div>

<div class="wrapper">
    <div class="foo old-ir">Inline block</div> Hello world!
    <div class="foo old-ir">Inline block</div> Hello world!
</div>

<div class="wrapper">
    <div class="bar old-ir">Block</div>
    <div class="bar old-ir">Block</div>
</div>

<h3>通过伪元素进行替换</h3>

<div class="wrapper">
    <div class="foo ir">Inline block</div>
    <div class="foo ir">Inline block</div>
</div>

<div class="wrapper">
    <div class="foo ir">Inline block</div> Hello world!
    <div class="foo ir">Inline block</div> Hello world!
</div>

<div class="wrapper">
    <div class="foo ir of">Inline block</div> 看看溢出的部分到哪去了
</div>

<div class="wrapper">
    <div class="bar ir">Block</div>
    <div class="bar ir">Block</div>
</div>

CSS

.wrapper {
    margin-bottom: 30px;
    background: #58B2DC; 
    font-size: 14px;
    line-height: 20px;
}

.foo {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #FBE251;
}

.foo.of {
    overflow: visible;
}

.bar {
    display: block;
    width: 20px;
    height: 20px;
    background: #FBE251;
}

.old-ir {
    overflow: hidden;
    text-indent: -999em;
}

.ir {
    overflow: hidden;
    *text-indent: -999em;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}