Use CSS to style text when it falls on a "/" within a table

I currently have a table with a row that displays like this:

word
hi Someword/AnotherWord/LastWord

My goal is to use CSS to break the text at the "/" symbol like this:

hi<br>Someword<br>/AnotherWord<br>/LastWord

However, the current CSS I am using results in the text flowing outside of the table cell. I have tried various solutions such as:

  • word-wrap: break-word;
  • word-break: break-all;

But they both end up breaking in the middle of the words. Is there a specific way to break at the "/" only?

htmlcss

Answer №1

Implementing a forced or optional line break after a character in CSS is not possible due to the nature of how CSS works with elements rather than individual characters. Browsers may treat a "/" as allowing a line break before or after it, but this behavior varies across different browsers.

Various techniques can be used to allow or enforce line breaks in HTML, potentially involving CSS modifications. If direct HTML modification is not an option, client-side JavaScript can be utilized to dynamically add elements for line breaks.

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

Utilize an iframe input field to initiate a Jquery event

Thanks to this amazing platform, I was able to discover a solution for expanding an iframe upon clicking using HTML and Jquery. However, my issue remains unresolved. I have successfully expanded the iframe with text, but I want to use input fields within ...

javascriptjqueryhtmliframe

Attempting to eliminate annoying alternative text from the lightbox photo gallery

My collection of artwork can be found on my website www.unlicensedeyesurgery.com. However, I am facing an issue with the Lightbox code that is being used. The problem lies in the fact that the Lightbox code utilizes the rel attribute of the anchor tag to d ...

javascripthtmlimagelightbox

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...

phphtmlajax

Creating an HTML form to collect user data and then automatically saving it to an Excel file stored in a shared Dropbox account

I am looking to extract data from a user form on a website and then automatically save it as an Excel file in a designated Dropbox account once the user clicks submit. Instead of receiving multiple emails every time the form is filled out, I would like t ...

javascripthtmlexcel

What is the best way to incorporate the icon directly from the .svg sprite into CSS/SCSS?

An irate customer is demanding that I use all icons inside an SVG file according to 2023 standards. This includes icons for background images and normal icons that can be easily changed. I currently utilize an SVG sprite in the following format: <?xml ...

htmlsvgsasssprite

The email notification system seems to be malfunctioning

Trying to implement a contact form on my page where users can provide feedback via email. The issue I'm facing is that I am receiving the email, but the page is not refreshing and no alert box is appearing. Can someone help me solve this problem? Here ...

javascriptphphtml

Creating a Unique Navigation Bar Design in Bootstrap 4 with Custom Styling for Active

I have successfully added a navigation bar to my page, but I am currently facing issues with the active state. I want the navigation item to be underlined when it is active (when I am on that page) or when it is hovered over, and I also want brackets added ...

javascriptcssbootstrap-4navigation

When using an iPhone 6+ in landscape mode with tabs open on Mobile Safari running iOS 8, the Bootstrap navbar-fixed-top may experience difficulty in

Encountered an issue with Bootstraps navbar-fixed-top on iPhone 6+ in landscape mode on iOS 8 when multiple tabs are open. To replicate the bug: 1) Visit http://getbootstrap.com/examples/navbar-fixed-top/ on iPhone 6+ in landscape mode with another tab ...

htmlcsstwitter-bootstrapmobilemobile-safari

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

phpcsshtmlmoodle

The connection to Cordova.js is established, but the deviceready event is not

I've included cordova.js in my project, called app.initialize();, but for some reason deviceready event is not being triggered. Any ideas on what might be causing this issue? Here's the JavaScript code: var app = { initialize: function() { ...

javascripthtmlcordova

A guide to implementing div wrapping in HTML

I'm in the process of using flexbox on my website. I have 10 div elements that I want to wrap around each other closely without any gaps between them. My goal is to have "4" positioned to the right of "1", instead of creating a new row and moving dow ...

javascriptjqueryhtmlcss

"Trouble with getting the Twitter Bootstrap dropdown menu to function properly

Currently, I am facing a challenge with my project as the dropdowns on the menu are not functioning properly. Despite having all the necessary files included, it seems like there might be an issue within my code. You can view the page here: (please try t ...

htmlcsstwitter-bootstrap

Printing content to an HTML page using Node.js

I'm seeking advice on using Node JS, AJAX, and other related technologies. My goal is to display the content of a JSON file on my HTML page. While I've been successful in saving new objects to the JSON file, I'm struggling to find an effecti ...

javascripthtmljsonnode.js

Login Form with Semantic UI Dropdown

I'm currently working on incorporating a dropdown login form for a website using the Semantic UI framework. However, I am facing an issue where the form is placed within an item on the menu, causing the dropdown menu to disappear once clicked. Here is ...

htmldrop-down-menusemantic-ui

Is there a way to automatically play videos without any audio?

Is there a way for my video to automatically start playing when the page loads, without sound? I want it to function similar to the video on this webpage: . I've experimented with various jQuery, JavaScript, and CSS techniques from online resources, ...

javascripthtmljquery

Can you explain how the CSS hack *+html works?

While working on a project, I have encountered multiple rules that look like this: * + html { /.../ } Although I understand the purpose of using * and +, I am unsure about the significance of this particular construction. Additionally, I came across ...

htmlcsscss-selectors

The alignment of the textarea is off due to an issue with the md

I'm experiencing an issue with the alignment of options in my form. The md-maxlength attribute is causing one line to be higher than the rest, as shown in the image below. https://i.sstatic.net/3J3Ts.png My goal is to move that specific textarea one ...

htmlcssangularjs

The Html is not having JavaScript executed before it

Within my header, there is a script that is making a call to a web API in order to populate a view model. The script is as follows: @using GigHub.Controllers @using GigHub.ViewModel @model GigHub.ViewModel.ProjectsViewModel @{ ViewBag.Title = "Projects"; ...

javascripthtmlrazor

The JSON is successfully parsed and the resulting output is in the form of an empty array

Looking at this json file I want to showcase the name, score, warsWon, WarsLost within a html page, under the header tag. Also, I aim to exhibit the userName, role, and level for all players in an html table. My current code gives me an output of array( ...

phphtmljsonparsing

jQuery Autocomplete without dropdown menu suggestion available

I'm working on a form for my webpage and I want to enhance user experience by adding autocomplete functionality. The goal is to suggest existing names as users type in the 'name' input text box. Although I can see in my console that it&apos ...

jqueryhtmlajaxautocomplete