CSS 文本缩进相当于适用于 Android 浏览器

Question

I have tabular data in a Telerik RadGrid where I'm converting the table cells <TD> 's to display: inline-block so they will "stack" vertically for mobile devices. Works great... except for when one of the items text is longer and is forced to wrap, where the 2nd line is not left-aligned with the first line. I was able to implement text-indent: hanging 45% , but it only resolves the issue for ios devices. Apparently text-indent isn't supported in Android.

I"m using the:before psuedo element to apply content: attr(data-label) representing the column heading. An important note is that the "document name" is a link to download the document. An example is attached.

Is there an equivalent technique to mimic this behavior for non-ios mobile devices?

Answer 1

I can see 4 options, similar look but with differences from the oldest method to the newest. (excluding float and position) It also doesnt look alike anything you linked about telerik?

They should all be working, android is not a browser tho:)

options to test:

 div { width: 300px; margin: 1em; border: solid; background: wheat; vertical-align: top; } div:before { content: attr(data-label); width: 120px; background: yellow } div[data-label="inline-table:"] { display: inline-table; } div[data-label="inline-table:"]:before { display: table-cell; } div[data-label="Column CSS:"] { display: inline-block; column-count: 2; } div[data-label="Column CSS:"]::before { display: block; min-height: 2.2em; } div[data-label="inline-flex:"] { display: inline-flex; } div[data-label="inline-flex:"]:before { display: table-cell; } div[data-label="inline-grid:"] { display: inline-grid; grid-template-columns: 1fr 1fr } div[data-label="inline-grid:"]:before {}

 <div data-label="inline-table:">This is the name of the document</div> <div data-label="Column CSS:">This is the name of the document</div> <div data-label="inline-flex:">This is the name of the document</div> <div data-label="inline-grid:">This is the name of the document</div>