Prevent element's text wrapping in grid cell without element exceeding cell's width
Question
I have a button inside a grid cell whose size is determined by font-size as em and padding as percentage.
I require the text of the button to not wrap.
Initially, I used <button type="button" id="log_out_button" data-action="manual_log_out">log out</button> but this produced an undesired result - it wrapped the text:
log
out
I added white-space: nowrap to the button to fix this but it made the button exceed its parent by 0.5cm, which decentralises my grid by the same amount.
To try fixing this knock-on problem, I changed the button to <input type="button" value="log out" id="log_out_button" data-action="manual_log_out"> , to no avail.
I added box-sizing: border-box to the button, to no avail.
I experimented with grid-template-columns: auto auto auto; (third value), trying the various options listed Chrome's dev console, to no avail.
Prior to the navigation being a grid, it was a flexbox that had the same problem.
I want my site scalable so I can't set fixed values ie in pixels, and setting the percentage of the cell (grid-template-columns) still results in an offset/decentralisation.
How do I prevent my 'log out' button's text from wrapping and prevent it from exceeding its parent's width, such that I avoid the grid's decentralisation issue?
Problem code:
<html>
<head>
<style type="text/css">
body {
font-family: Arial;
background-color: white;
font-size: 1.5vh;
}
header {
height: 100%;
margin: auto;
height: 10.9%;
width: 100%;
}
nav {
margin: auto;
align-items: center;
justify-content: center;
height: 100%;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 2.5%;
}
nav a, nav a:visited {
text-decoration: none;
color: black;
}
#user_identity {
display: flex;
justify-content: center;
flex-flow: column;
align-items: flex-end;
}
#navigation_menu_wrapper {
height: 100%;
}
#navigation_menu {
flex: 1;
display: flex;
height: 100%;
align-items: center;
}
#navigation_menu div {
text-align: center;
padding-left: 15px;
padding-right: 15px;
font-size: 1.125em;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(205, 255, 205);
border-right: 1px solid rgb(157, 189, 157);
}
#navigation_menu a {
display: block;
padding: 7px 12px 7px 12px;
border-radius: 3px;
cursor: pointer;
}
#log_out_wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
}
#username_label {
font-family: "Optima Bold";
font-size: 1.87em;
color: rgb(72, 160, 72);
}
#permanent_id_label {
font-size: 1em;
color: rgb(146, 146, 146);
font-weight: bold;
margin-left: 9px;
cursor: default;
}
#mobile_menu_control {
display: none;
}
#log_out_button {
padding-top: 7%;
padding-bottom: 8%;
border: none;
border-radius: 3px;
background-color: #8dc49d;
text-align: center;
padding-left: 12%;
padding-right: 12%;
font-size: 1.25em;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<div id="user_identity">
<div id="username_label">texthere</div>
<div id="permanent_id_label">#texthere</div>
</div>
<div id="navigation_menu_wrapper">
<button id="mobile_menu_control">menu</button>
<div id="navigation_menu">
<div>
<a href="../pages/link1.php">link1</a>
</div>
<div>
<a href="../pages/link2.php">link2</a>
</div>
<div>
<a href="../pages/link3.php">link3</a>
</div>
<div>
<a href="../pages/link4.php">link4</a>
</div>
<div>
<a href="../pages/link5.php">link5</a>
</div>
<div>
<a href="../pages/link6.php">link6</a>
</div>
</div>
</div>
<div id="log_out_wrapper">
<input type="button" value="log out" id="log_out_button" data-action="manual_log_out">
</div>
</nav>
</header>
<div id="content_wrapper"></div>
</div>
</body>
</html>
1 answers
solution1
0 2022-08-07 14:58:34
As suggested by commenters, applied the following jQuery/JavaScript fix:
logOutButtonWidth = 0;
$(document).ready(function() {
centraliseHeader();
$(window).resize(function() {
centraliseHeader();
});
});
function centraliseHeader() {
logOutButtonWidth = $("#log_out_button").outerWidth();
$("nav").css({
gridTemplateColumns: "auto auto " + logOutButtonWidth + "px"
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.