文本长度超过外部div，css-property自动换行：break-word无法正常工作 [英] text length exceeds outer div , css-property word-wrap:break-word not working properly
本文介绍了文本长度超过外部div，css-property自动换行：break-word无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html><head></head><body onLoad="myFunction()"><style>body {font:14px arial;margin-left:0;margin-top:0;margin-right:0;word-wrap:break-word;text-overflow: ellipsis;overflow: hidden;white-space: wrap;}"</style><div class="greenBorder" style="display: table; height: 100%; #position: relative; overflow: hidden;"><div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"><img src="double-quote-up@2x~iphone.png" width="14" height="14" style="display:inline-block;float:left;" /><span id="longText" style="max-width:200px;word-wrap: break-word;word-break:break-all;display:inline-block;">1111111111111111111111111111111111111111111122222222222333333333333333333344444444444</span><img src="double-quote-down@2x~iphone.png" width="14" height="14" style="display:inline-block" /></div></div></body></html>
我想要的东西l这个结构： -
I want somthing like this structure :-
<img_quote_start>a_long_string_here_a_long_string_here_a_long_st
a_long_string_here_a_long_string_here_a_long_string_here_a_lo
ng_string_here_a_long_string_here_a_long_string_here_a_long_s
tring_here<img_quote_end>
感谢您的回答。
Thanks for your answers.
推荐答案
Hello Ravi，
添加宽度：200px到span。它应该工作。这里有一个非常好的演示[ ^ ]。可能是以下示例可以帮助您。
Hello Ravi,
Add width:200px to span. It should work. A very good demo is available here [^]. May be following example can help you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<meta name="author" content="Prasad P. Khandekar"></meta>
<meta http-equiv="Expires" content="0"></meta>
<meta http-equiv="Pragma" content="no-cache"></meta>
<meta http-equiv="Cache-Control" content="no-cache"></meta>
<meta http-equiv="Pragma-directive" content="no-cache"></meta>
<meta http-equiv="cache-directive" content="no-cache"></meta>
<title>Test Page</title>
<style type="text/css">
body {
font:14px arial;
margin:0;
overflow: hidden;
word-wrap:break-word;
white-space: wrap;
text-overflow: ellipsis;
}
.greenBorder {
border: 1px solid #008000;
}
.quotestart {
width:16px;
vertical-align: top;
background: transparent top left no-repeat scroll url('images/lq.png');
}
.quoteend {
width: 16px;
vertical-align: bottom;
background: transparent top left no-repeat scroll url('images/rq.png');
}
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 100%; removed: relative; overflow: hidden;">
<div style=" #removed: absolute; #removed 50%;display: table-cell; vertical-align: middle;">
<span id="longText" style="max-width:200px;width:200px;word-wrap: break-word;word-break:break-all;display:inline-block;">
<img src="images/lq.png"/>
1111111111111111111111111111111111111111111122222222222333333333333333333344444444444
<img src="images/rq.png"/>
</span>
</div>
</div>
</body>
</html>
rq.png& lq.png是使用Terbuchet MS字体& amp;创建的16x16图像。 Alt + 0147，Alt + 0148序列。
问候，
rq.png & lq.png are 16x16 images created using Terbuchet MS font & Alt+0147, Alt+0148 sequences.
Regards,
这篇关于文本长度超过外部div，css-property自动换行：break-word无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
