Home > database >  why Span element baseline has changed after updating chrome browser to version starts from 108
why Span element baseline has changed after updating chrome browser to version starts from 108

Time：12-06

After updating to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit) The span element got severely affected. It just changed it's baseline when multiple span were place one top of other.

Expected beaviour: Span should grow on top-wards(v-107) not on bottom-wards(v-108) direction.

in version 107.0.5304.87 of chrome enter image description here

in version 108.0.5359.94 of chrome enter image description here

Uploaded the code and it give any of the result as shown in above 2 images based on your chrome version.

<html>

<body>
        <div dir="auto" style="line-height: 2.5; text-align: left;">
                <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
                <span>
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
            </div>
</body>

</html>

How to get old behaviour in new updated google chrome version?

CodePudding user response：

<html><head></head><body>
        <div dir="auto" style="line-height: 2.5;text-align: left;display: flex;flex-wrap: wrap;">
    
                <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0);background: rgb(255, 255, 255);position: relative;padding: 0px;cursor: default;display: flex;flex-direction: column-reverse;opacity: 0.9;line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px;height: 23px;background: rgb(255, 0, 199);position: absolute;z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-content: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun"  style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a"  style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-content: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name"  style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092"  style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
            </div>


</body></html>

Page link：https//www.codepudding.com/database/632947.html

Prev:Page contents in Navbar not filling the screen:
Next:Get Value of Week Input
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding