个人中心
gpt4 book ai didi

html - 让文本扩散到 div 的边缘

转载 作者：行者123 更新时间：2023-11-28 04:36:30 25 4
gpt4 key购买 nike

我想让绿色 div ‘header-text-wrap’ 中的文本整齐地分布到 div 的边缘。我知道它可以与字母间距和单词间距命令一起使用，但我担心如果我这样做的话兼容性(如果某些浏览器显示的字体大小略有不同，那么文本会错误地调整大小或添加另一行不需要的行).如果我使用 justify 命令，只有顶行是完全间隔的，但下面的行不是。

如果没有固定的 div 宽度以及单词和字母间距，是否可以实现这一点？

谢谢你的帮助

@charset "UTF-8";
/* CSS Document */

body{
	background-color:#F6F7C1;	
	padding:0px;
	margin:0 auto; /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */
}

/* Header */
#header-wrap{
	background:#D6ECFF;
	width:100%;
	height:auto;
	border-bottom: 3px solid #CCC;
	/* margin:0 auto; needed? */
}
#header-top{
	/* contains logo & title text */
	width:960px;
	height:auto;
	margin:0 auto; /* aligns centrally */
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-top-content-wrap{
	width:auto;
	height:auto;
	border-bottom:1px solid #ccc;
	padding:15px 0 10px 0;
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-text-wrap{
	width:460px;
	height:auto;
	text-align:justify;
	float:left;
	background:#090;
}
.header-logo-wrap{
	width:190px;
	height:100px;
	text-align:justify;
	float:left;
	padding-right:30px;
}
#header-bottom{
	/* contains navigation menu */
	width:960px;
	height:auto;
	margin:0 auto; /* aligns centrally */
	padding: 10px 0 10px 0;
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-navigation-link{
	width:auto;
	height:auto;
	float:left;
	margin-right: 50px;
	font-size:20px;
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	color:#333;
}
.header-navigation-link-end{
	width:auto;
	height:auto;
	float:left;
	margin-right: 0px;
	font-size:20px;
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	color:#333;
}

/* Fonts */
header{
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	font-size:45px;
	text-transform:uppercase;
	line-height:40px;
	color:#000;
}
slogan{
	font-family: courier new, tahoma, Arial, Cambria, serif;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	font-size:20px;
	text-transform:uppercase;
	word-spacing:10px;
	letter-spacing:5px;
	color:#666;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- Meta Tags Below -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>___________________________</title>
<!-- Google Analytics Code Below -->
<!-- _____________________________ -->
</head>

<body>

<!-- Header -->
<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header-wrap">
  <div id="header-top">
    <div class="header-top-content-wrap">
      <div class="header-logo-wrap"><img src="images/logo.jpg" width="190" height="100"  alt="logo"/></div>
      <div class="header-text-wrap">
        <header>first line of text &amp; second line</header>
        <slogan>slogan goes here too</slogan>
      </div>
    </div>
  </div>
  <div id="header-bottom">
    <div class="header-navigation-link">Home</div>
    <div class="header-navigation-link">About</div>
    <div class="header-navigation-link">Services</div>
    <div class="header-navigation-link-end">Contact</div>
  </div>
</div>
<!-- #EndLibraryItem -->

<!-- Main -->
<div id="body-wrap">body</div>

</body>
</html>

最佳答案

将这些 CSS 声明添加到您的 header-text-wrap类:

text-align: justify;  
-moz-text-align-last: justify; /* For Firefox */
text-align-last: justify;

像这样:

@charset "UTF-8";
/* CSS Document */

body{
	background-color:#F6F7C1;	
	padding:0px;
	margin:0 auto; /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */
}

/* Header */
#header-wrap{
	background:#D6ECFF;
	width:100%;
	height:auto;
	border-bottom: 3px solid #CCC;
	/* margin:0 auto; needed? */
}
#header-top{
	/* contains logo & title text */
	width:960px;
	height:auto;
	margin:0 auto; /* aligns centrally */
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-top-content-wrap{
	width:auto;
	height:auto;
	border-bottom:1px solid #ccc;
	padding:15px 0 10px 0;
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-text-wrap{
	width:460px;
	height:auto;
	text-align:justify;
	float:left;
	background:#090;
    text-align: justify;  
    -moz-text-align-last: justify; /* For Firefox */
    text-align-last: justify;
}
.header-logo-wrap{
	width:190px;
	height:100px;
	text-align:justify;
	float:left;
	padding-right:30px;
}
#header-bottom{
	/* contains navigation menu */
	width:960px;
	height:auto;
	margin:0 auto; /* aligns centrally */
	padding: 10px 0 10px 0;
	/* the below aligns the divs centrally (vertically & horizontally) */
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-navigation-link{
	width:auto;
	height:auto;
	float:left;
	margin-right: 50px;
	font-size:20px;
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	color:#333;
}
.header-navigation-link-end{
	width:auto;
	height:auto;
	float:left;
	margin-right: 0px;
	font-size:20px;
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	color:#333;
}

/* Fonts */
header{
	font-family: Arial, sans-serif, tahoma, Arial, Cambria;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	font-size:45px;
	text-transform:uppercase;
	line-height:40px;
	color:#000;
}
slogan{
	font-family: courier new, tahoma, Arial, Cambria, serif;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	font-size:20px;
	text-transform:uppercase;
	word-spacing:10px;
	letter-spacing:5px;
	color:#666;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- Meta Tags Below -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>___________________________</title>
<!-- Google Analytics Code Below -->
<!-- _____________________________ -->
</head>

<body>

<!-- Header -->
<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header-wrap">
  <div id="header-top">
    <div class="header-top-content-wrap">
      <div class="header-logo-wrap"><img src="images/logo.jpg" width="190" height="100"  alt="logo"/></div>
      <div class="header-text-wrap">
        <header>first line of text &amp; second line</header>
        <slogan>slogan goes here too</slogan>
      </div>
    </div>
  </div>
  <div id="header-bottom">
    <div class="header-navigation-link">Home</div>
    <div class="header-navigation-link">About</div>
    <div class="header-navigation-link">Services</div>
    <div class="header-navigation-link-end">Contact</div>
  </div>
</div>
<!-- #EndLibraryItem -->

<!-- Main -->
<div id="body-wrap">body</div>

</body>
</html>

我希望这就是您要找的。

关于html - 让文本扩散到 div 的边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41444818/

25 4 0
文章推荐： javascript - CSS Flexbox 浏览器兼容性问题
文章推荐： html - CSS 置顶，然后滚动回到顶部
文章推荐： html - 网格布局不起作用
文章推荐： javascript - 在 Canvas 中使用 CSS 字体不适用于 Angular 2
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com