logo
down
shadow

Prevent inline-block from wrapping on white-space: pre?


Prevent inline-block from wrapping on white-space: pre?

By : femot
Date : October 26 2020, 11:51 AM
hope this fix your issue This bug is 4 years old and still present in the latest Chrome and Safari, but I did find a workaround that doesn't add undesirable whitespace, which is to add an empty :after pseudo-element: http://jsbin.com/oQuBAmIJ/1/edit
code :


Share : facebook icon twitter icon
White-space and newline between inline-block elements taking up space

White-space and newline between inline-block elements taking up space


By : Sebastian Awatramani
Date : March 29 2020, 07:55 AM
around this issue Working Fiddle
Add two classes in CSS:
code :
.lfloat {
    float: left;
}

.clrflt {
    clear: both;
}
<!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt></div>
</div>
<html>
    <head>
        <style>
        *{padding:0;margin:0}
        ul#container{width:204px}  //Had to add 4px for extra width
         ul#container li{display:inline-block;height:100px;width:100px;background:#666}
        .left{width:50%}
        .right{width:50%;background:#0ca}
        </style>
    </head>
    <body>
        <ul id="container">
           <li>Left</li>
           <li>Right</li>
        </ul>
    </body>
    </html>
How to prevent inline-block divs from wrapping?

How to prevent inline-block divs from wrapping?


By : Luqman Jutt
Date : March 29 2020, 07:55 AM
hop of those help? Add white-space: nowrap; to your .layout style declaration.
This will do exactly what you need: preventing the divs from wrapping.
code :
.layout {
       white-space : nowrap; /* this does the trick */
          overflow : hidden; /* this prevents the grey divs from overflowing */
    vertical-align : top;
     border-radius : 15px;
           display : inline-block;
}

.layoutbacking {
    border-radius : 15px;
       background : #CCCCCC;
          padding : 5px;
           margin : 5px;
}
<div class="layout" style="background: #222222; width: 100%">
    <div>
        <div class="layout layoutbacking">
            <table>
                <tr>
                    <th>header 1</th>
                    <th>header 2</th>
                    <th>header 3</th>
                    <th>header 4</th>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
            </table>
        </div>
        <div class="layout">
            <div class="layout layoutbacking">
                <table>
                    <tr>
                        <th>header 1</th>
                        <th>header 2</th>
                        <th>header 3</th>
                        <th>header 4</th>
                    </tr>
                    <tr>
                        <td>data 1</td>
                        <td>data 2</td>
                        <td>data 3</td>
                        <td>data 4</td>
                    </tr>
                </table>
            </div>
            <br />
            <div class="layout layoutbacking">
                <table>
                    <tr>
                        <th>header 1</th>
                        <th>header 2</th>
                        <th>header 3</th>
                        <th>header 4</th>
                    </tr>
                    <tr>
                        <td>data 1</td>
                        <td>data 2</td>
                        <td>data 3</td>
                        <td>data 4</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div>
        <div class="layout layoutbacking">
            <table>
                <tr>
                    <th>header 1</th>
                    <th>header 2</th>
                    <th>header 3</th>
                    <th>header 4</th>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
            </table>
        </div>
        <div class="layout layoutbacking">
            <table>
                <tr>
                    <th>header 1</th>
                    <th>header 2</th>
                    <th>header 3</th>
                    <th>header 4</th>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
            </table>
        </div>
Prevent white space from wrapping together with word

Prevent white space from wrapping together with word


By : Wei Zhongguo
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Turned out to be a Chrome bug in version 28: https://code.google.com/p/chromium/issues/detail?id=246127
It's fixed in the currently beta version 29, only a matter of time before it gets pushed to the public build.
An inline-block div with "white-space: normal" exceeds the width of a parent with "white-space: nowrap&qu

An inline-block div with "white-space: normal" exceeds the width of a parent with "white-space: nowrap&qu


By : Josh L
Date : March 29 2020, 07:55 AM
To fix this issue I agree with @hashem That's the expected behavior. By using white-space: nowrap; for the parent, you've collapsed the whitespaces between inline(-block) elements. white-space treats the children, not the element itself.
Well if you still need a fix you can add width to second child to make it fit inside container.
code :
.child2
{
    width: 70%;
}
inline-block last item wrapping, but there is enough space

inline-block last item wrapping, but there is enough space


By : Miguel G
Date : March 29 2020, 07:55 AM
I hope this helps you . I am trying to make my menu to the right side using text-align:right on the parent and display: inline-block on menu. (see example: http://codepen.io/sanns/pen/WQjRoj?editors=110)
code :
.navg__item {
    margin-right: 2.5%;
}
.navg__item {
    margin-right: 10px;
}
Related Posts Related Posts :
  • Passing Query String Param into Response AWS API Gateway
  • Drive Api V3 - How to name file being uploaded?
  • IBM Watson speech to text WebSocket authorization with IAM API key
  • Why does ABAP cut string to one character?
  • Hide Taskbar button in FMX on Windows
  • Limit on the size of Azure table property that can be indexed by search?
  • How to authenticate to influxdb when using k6
  • How to customize the NSIS installer screens for multiple languages
  • How do I do a Depth First Search Alphabetically?
  • Updating already installed sideloaded uwp application
  • Formula returning previous month in `mmmm` format, only returns January
  • Postman API Tests
  • STRIPS Planner Doesn't Compile
  • WebCrypto AES-CBC outputting 256bit instead of 128bits
  • "File format not recognized" when building Petalinux app
  • Long living service with coroutines
  • Define data at cell centers using VTK format
  • Systemverilog interfaces over hierarchical boundaries
  • AIOHTTP:TypeError: index() takes 0 positional arguments but 1 was given
  • ProxySql Master node not serve the traffic untill slave gets shunned
  • Visual Studio 2019 Preview Remote Debugger
  • Setting composer (airflow) bucket using gcloud CLI
  • Cannot refresh subform from other subform
  • Email alert when field meets certain condition
  • MemSql > workaround for SELECT ... FOR UPDATE
  • Declarative Pipeline - Use of when condition, how to do nested conditions anyOf/allOf/not
  • Stateful microservices default 443 port share issue on the azure service fabric cluster
  • TYPO3 imagemagick makes images oversaturated
  • Typo-tolerant text searching?
  • How do I extract the components of a tuple in DAML?
  • Gimp 2.8.22: Change Color & Keep Transparency
  • I tried with this code, but it won't work with Ionic 3
  • Karate-Cucumber Report - No report file was added
  • Autofac - how to register a type used as a constructor parameter that requires the resolving (constructor) type as a gen
  • Tkinter filedialog is stealing focus and not returning it without "Alt-tab" in Python 3.4.1
  • jmeter dashboard report includes transaction controller children
  • Visual Branching in SourceTree
  • Doctrine2 orderBy in Symfony4 UnitTest
  • Match table-record to main-report dataset in Jaspersoft Studio
  • Drupal 8 custom module getting page not found
  • Is it possible that a container instance isn't really a container?
  • Padding not being understood in the UpSampling2D layer of a sequential layer
  • What is the incentive for a participating node in a "Proof of Stake" consensus model of Blockchain?
  • Radial gradient on a node in cytoscape
  • How to create operators from list in Airflow?
  • Is bitly supported for Native Script?
  • Reading log data records from a BLE device
  • How to add aliases in yii2?
  • XPages - Bootstrap popover
  • Misleading exception message in GatewayMethodInboundMessageMapper with un-annotated parameters
  • Inno Setup Disable Next button using multiple validation expressions (when input value matches one of multiple values)
  • 'reference to setCapability is ambiguous' on Appium Java project for Android Caps
  • Quartz .net - Abort/Stop Current Execution of Job & Pause All the triggers
  • Calculate length of road in a Polygon
  • Can Signal have zero recipients in BPMN?
  • Perl6: .sort() doesn't use overridden cmp
  • Find a directory using wildcard in Inno Setup
  • Getting error trying to formrequest login page via scrapy shell
  • Botframework Dialog migration v3 to v4
  • How to load resources from classpath in itext7?
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org