HTML不适合有空格的文本

时间：2018-12-25 13:13:53

标签： html css

这是我要实现的布局 enter image description here

但是由于某种原因，当我在图片旁边添加段落时，它会破坏整个div，而我却只剩下这个： enter image description here 此外，您可以看到它试图将其串联而不是溢出。它甚至在底部添加了一个标尺。 这是我的代码：

<htmL>
	<head>
		<title>Ohrid</title>
	</head>
	<body style="background-color: #f1f1f1">
		<h1 style="color: #00dd00">Ohridsko Ezero</h1>
		<hr style="background-color: #0d0; height:2px; border: none;">
		<div>
			<div style="display: inline-block;  ">
				<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
			</div>
			<div style="display: inline-block; vertical-align: top">
				<div style="font-size: 14px; font-family: Tahoma">
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Zivotinski i rastitelen svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Riben Svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2></a>
				</div>
				<div>
					<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
					<span style="display:inline-block; vertical-align: top">
						<a href="https://www.google.com/search?hl=en&q=Ohridsko+Ezero&btnG=Google+Search&aq=f&oq=" target="_new">Prebaraj na Google za Ohridskoto Ezero</a>
					</span>
				</div>
				<div>
					<!-- imagine this is the paragraph -->
					asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
				</div>
			</div>	
		</div>
	</body>
</htmL>

让我注意，有足够的空间来容纳文本，它只是在到达屏幕末端时就中断了。

4 个答案:

答案 0 :(得分：1)

您可以使用flexbox解决此问题。只需添加“ display：flex;”容器元素的属性：

<htmL>
	<head>
		<title>Ohrid</title>
	</head>
	<body style="background-color: #f1f1f1">
		<h1 style="color: #00dd00">Ohridsko Ezero</h1>
		<hr style="background-color: #0d0; height:2px; border: none;">
		<div style="display: flex;">
			<div style="display: inline-block;  ">
				<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
			</div>
			<div style="display: inline-block; vertical-align: top;">
				<div style="font-size: 14px; font-family: Tahoma">
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Zivotinski i rastitelen svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Riben Svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2></a>
				</div>
				<div>
					<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
					<span style="display:inline-block; vertical-align: top">
						<a href="https://www.google.com/search?hl=en&q=Ohridsko+Ezero&btnG=Google+Search&aq=f&oq=" target="_new">Prebaraj na Google za Ohridskoto Ezero</a>
					</span>
				</div>
				<div>
					<!-- imagine this is the paragraph -->
					asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
				</div>
			</div>	
		</div>
	</body>
</htmL>

答案 1 :(得分：1)

对于长段问题：

添加word-break:break-all样式的内联body标签。

<htmL>
  <head>
    <title>Ohrid</title>
  </head>
  <body style="word-break:break-all; background-color:#f1f1f1">
  <h1 style="color: #00dd00">Ohridsko Ezero</h1>
  <hr style="background-color: #0d0; height:2px; border: none;">
  <div>
    <div style="display: inline-block;  ">
      <img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
    </div>
			<div style="display: inline-block; vertical-align: top">
				<div style="font-size: 14px; font-family: Tahoma">
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Zivotinski i rastitelen svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Riben Svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2></a>
				</div>
				<div>
					<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
					<span style="display:inline-block; vertical-align: top">
						<a href="https://www.google.com/search?hl=en&q=Ohridsko+Ezero&btnG=Google+Search&aq=f&oq=" target="_new">Prebaraj na Google za Ohridskoto Ezero</a>
					</span>
				</div>
				<div>
					<!-- imagine this is the paragraph -->
					asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
				</div>
			</div>	
		</div>
	</body>
</htmL>

答案 2 :(得分：0)

如果我正确理解了您的问题，您希望文本溢出到下一行而不是创建水平滚动条吗？

为此，您需要为div定义一个宽度并添加word-wrap: break-word; 

#overflow{
    width:100vw;
    word-wrap: break-word;
  }
    <htmL>
    	<head>
    		<title>Ohrid</title>
    	</head>
    	<body style="background-color: #f1f1f1">
    		<h1 style="color: #00dd00">Ohridsko Ezero</h1>
    		<hr style="background-color: #0d0; height:2px; border: none;">
    		<div>
    			<div style="display: inline-block;  ">
    				<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
    			</div>
    			<div style="display: inline-block; vertical-align: top">
    				<div style="font-size: 14px; font-family: Tahoma">
    					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2></a>
    					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Zivotinski i rastitelen svet</h2></a>
    					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Riben Svet</h2></a>
    					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2></a>
    				</div>
    				<div>
    					<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
    					<span style="display:inline-block; vertical-align: top">
    						<a href="https://www.google.com/search?hl=en&q=Ohridsko+Ezero&btnG=Google+Search&aq=f&oq=" target="_new">Prebaraj na Google za Ohridskoto Ezero</a>
    					</span>
    				</div>
    				<div id="overflow">
    					<!-- imagine this is the paragraph -->
    					asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
    				</div>
    			</div>	
    		</div>
    	</body>
    </htmL>

答案 3 :(得分：0)

有一种更简单的方法可以在图像旁边添加文本：只需将它们放在同一div中，然后向图像中添加样式float: left;，如下所示：

<htmL>
	<head>
		<title>Ohrid</title>
	</head>
	<body style="background-color: #f1f1f1">
		<h1 style="color: #00dd00">Ohridsko Ezero</h1>
		<hr style="background-color: #0d0; height:2px; border: none;">
		<div>
			<div>
				<img src="./images/karta_small.jpg" width="180" height="280" hspace="60" style="float: left;">
				<div style="font-size: 14px; font-family: Tahoma">
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Zivotinski i rastitelen svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Riben Svet</h2></a>
					<a href="#" style="color: #77ee00"><h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2></a>
				</div>
				<div>
					<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
					<span style="display:inline-block; vertical-align: top">
						<a href="https://www.google.com/search?hl=en&q=Ohridsko+Ezero&btnG=Google+Search&aq=f&oq=" target="_new">Prebaraj na Google za Ohridskoto Ezero</a>
					</span>
				</div>
				<div style='word-break: break-word;'>
					<!-- imagine this is the paragraph -->
					asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
				</div>
			</div>	
		</div>
	</body>
</htmL>

要将单个文字段落包装到下一行，请将style='word-break: break-word;'添加到包含该段落的div中。

相关问题
最新问题