iOS7 webkit introduces a new feature called span word break

After upgrading my phone to iOS7 today, I came across a strange issue.

(blog.niwyclin.org) This is just a test post on my website

Everything looks good on the desktop browser.

When I used Responsivator to check, it appeared perfect, like this (i.minus.com/ipy6XHEepJcvf.png)

However, when viewed on browsers in iOS7 (including Safari and Chrome)

(i.minus.com/i2B2Ul5f09WL8.png)

(i.minus.com/iDM5uVFIvegKe.png)

A word breaks unexpectedly but I'm not sure why.

The white-space: pre property is set.

Is there an issue with my CSS (LESS) code?

Answer №1

I was able to find the solution after some research.

After reading through

I discovered that webkit on iOS 7 makes changes to the overflow-wrap property.

To remedy this, I manually added pre {overflow-wrap: normal;}, and it solved the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with regex failing to capture newlines in sed or perl?

I am currently working on cleaning a CSV file, which involves removing HTML tags within some of the values. I recently found a solution for this issue: by using the following command sed -e 's/<[^>]*>//g' file.html, as suggested in this ...

What is the solution to adding values from a counter?

I am trying to create a JavaScript counter: function animateSun() { var $elie = $("#sun"); $({ degree: 0 }).animate({ degree: 360 }, { duration: 190999, easing: 'linear', step: function(val) { now = Math.round ...

Accordion featuring collapsible sections

Looking to build an accordion box using Javascript and CSS. The expanded section should have a clickable link that allows it to expand even further without any need for a vertical scroll bar. Any ideas on how this can be achieved? Thank you ...

Implementing Interactive Buttons

As a newcomer to JScript, I have been attempting to dynamically add textboxes and select menus to a form. While I have managed to make them appear on the page, I am facing an issue with JQuery not functioning properly. Although the textboxes are visible on ...

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

The efficiency of ASP.NET's rendering of HTML tables

I am working on generating an HTML report that includes a table with 265 rows and a varying number of columns (ranging from 1 to over 150). The issue arises when I attempt to display a report with more than 20 columns: while fetching data from the databas ...

JQuery functions are functioning properly in Internet Explorer 10, but are encountering issues in Internet Explorer

My JavaScript function calls a jQuery function that works in IE10 but not in IE7. function test() { // Display message before calling jQuery function... alert("Before"); // Call the jQuery function... $("#boxscroll").getNiceScroll().resize(); // Display m ...

Manipulating values in JavaScript using an onclick event in PHP

I am looking to remove the "http" from the URL part of an input link before sending the data. This is my input code that looks like this when clicked: <input style="outline: none;" type="button" onclick="formatText ('link:url');" class="btn ...

How can I retrieve the name of the object from the fromViewController in iOS?

Although this may seem like a double question, I am aware that I can use the property in toViewController to retrieve the name of the UIViewController and obtain an NSString indicating my current location. However, I am curious if there is a straightforwa ...

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

Encountering an error while trying to execute `$(document).ready(function() {}

Recently, I delved into the world of JavaScript, particularly Jquery. As I encountered the $(document).ready(function() {}); statement and added it to my code, I faced an issue when placing it within the header tag of my HTML. The script tag would display ...

Disabling a button until a selection is made in a combobox using Angular

I am currently working on a template that includes a combobox, a button, and a table. What I am trying to achieve is to make the buttons unclickable unless a value is selected from the combobox. After selecting a value, the button will call a service metho ...

Achieving precise alignment of div content through Css techniques

body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

Is there a way to stop TD from going to the next line?

I am using Javascript to dynamically generate a table and I want it to extend beyond the boundaries of the page. When I manually create the table, it works fine and extends off the page, but once I put it into a loop, the <td> elements wrap onto a se ...

Using CSS3, you can apply multiple backgrounds to an unordered list with one set

Currently, I am in the process of working on a unique Wordpress template. One of the challenges I am facing is figuring out how to incorporate three background images for each <li> element in the dynamically generated navigation menu. Here are two ex ...

Using a video as a background in HTML

My code has an issue where I have set overflow: hidden in the CSS but the video is still not displaying below the text as intended. The relevant CSS snippets are: fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; overflow:hidden ...

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

Using JQuery to Load a CSHTML File into a Modal in C#

I am attempting to have the content of one specific page loaded into a modal on a different page when a button is clicked. Unfortunately, I am encountering an issue where not only the desired content from the specified page is loading, but also content fro ...