如何将标签限制在某个最大宽度并将其包裹在该长度之后？ [英] How can I restrict a label to a certain max width and have it wrap after that length?

问题描述

我看到将此添加到我的HTML表单后：



< label> 注意：如果旅行者选择包括个人旅行，则仅根据旅行的业务部分记录时间/日期。提供个人旅行的解释。< / label>



...它将变得无法确定需要多少宽度 - 我进一步拉出窗口HTML所在的位置（在jsfiddle页面上，这里是： http://jsfiddle.net/clayshannon/karpxwn2/11/ [ ^ ]），周围的边界越宽盒子变成了，所以它不再浮动到第一个窗体的右边。



我尝试给标签一个最大宽度并包装它们，如下所示：



标签{

最大宽度：200px;

换行：true;

}



......但是什么都没做。



这是完整的第二种形式：



< form class =borderedform>

< label>旅行编号：< / label>

&l t;输入类型=文本id =tripnumbertitle =如果适用/>




< label>表格编写者：< ; / label>

< input type =textid =formpreparedby/>

---

< label> ;部门/部门< /标签>

< input type =textid =deptdivision/>




< label>电子邮件：< / label>

< input type =emailid =email/>

< label> Ext： < / label>

< input type =textid =extension/>

---

< label class =reditalics>必填：< / label>

< label> US Citizen - YES< / label>

< input type =radio id =uscitizenyesvalue =YES/>

< label> NO< / label>

< input type =radioid = uscitizennovalue =NO/>




< input type =radioid =visitor/>访客

< label>外国签证类型：< / label>

< select title =请选择签证类型>

< option value =pleaseselect>请选择< / option>

< option value =notapplicable>不适用< / option>

< option value =a1> A-1< / option>

< option value =a2> A-2< / option>

< option value =b1> B-1< / option>

< option value =b2> B-2< / option>

< option value =f1> F-1< / option>

< option value =hib> H-1B< / option>

< option value =h2a> H-2B< / option>

< option value =h2b> H-3< / option>

< option value =h3> J-1< / option>

< option value =j1> P-1< / option>

< option value =p1> P-2< / option>

< option value =p2> P-3< / option>

< option value =tn> TN< / option>

< / select>




< input type =radioid =ucstudent/> UC学生




< input type =radioid =ucemployee/> UC员工

< label> UC Campus：< / label>

< select title =请选择一个校园>

< option value =pleaseselect>请选择< / option>

< option value =ucsc> UC Santa Cruz< / option>

< option value =ucb> UC Berkeley< / option>

< option value =ucd> UC Davis< / option>

< option value =uci> UC Irvine< / option> ;

< option value =ucla> UC Los Angeles< / option>

< option value =ucm> UC Merced< / option>

< option value =ucr> UC Riverside< / option>

< option value =ucsd> UC San Diego< / option>

< option value =ucsf> UC旧金山< /选项>

< option value =ucsb> UC Santa Barbara< / option>

< / select>




< label> 注意：如果旅行者选择包括个人旅行，则仅根据旅行的业务部分记录时间/日期。提供个人旅行的说明。< / label>

< / form>



在添加最后一个标签之前一切正常所以它绝对是涵洞的标签。

I see that after adding this to my HTML form:

<label>Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>

...it becomes insatiable as to how much width it will take - the further I pull out the window in which the HTML resides (on the jsfiddle page, which is here: http://jsfiddle.net/clayshannon/karpxwn2/11/[^]), the wider the border around the box becomes, so that it no longer floats up to the right of the first form.

I tried giving the labels a max-width and wrapping them, like so:

label {
max-width: 200px;
wrap: true;
}

...but that did nothing.

Here is the entire second form:

<form class="borderedform">
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />


<label>Form prepared by:</label>
<input type="text" id="formpreparedby" />

---

<label>Dept / Division</label>
<input type="text" id="deptdivision" />


<label>Email:</label>
<input type="email" id="email" />
<label>Ext:</label>
<input type="text" id="extension" />

---

<label class="reditalics">Required:</label>
<label>US Citizen - YES</label>
<input type="radio" id="uscitizenyes" value="YES" />
<label>NO</label>
<input type="radio" id="uscitizenno" value="NO" />


<input type="radio" id="visitor" />Visitor
<label>Foreign Visa Type:</label>
<select title="Please select a visa type">
<option value="pleaseselect">Please Select</option>
<option value="notapplicable">Not Applicable</option>
<option value="a1">A-1</option>
<option value="a2">A-2</option>
<option value="b1">B-1</option>
<option value="b2">B-2</option>
<option value="f1">F-1</option>
<option value="hib">H-1B</option>
<option value="h2a">H-2B</option>
<option value="h2b">H-3</option>
<option value="h3">J-1</option>
<option value="j1">P-1</option>
<option value="p1">P-2</option>
<option value="p2">P-3</option>
<option value="tn">TN</option>
</select>


<input type="radio" id="ucstudent" />UC Student


<input type="radio" id="ucemployee" />UC Employee
<label>UC Campus:</label>
<select title="Please select a campus">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>


<label>Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
</form>

It works fine until that last label is added, so it's definitely the label that is the "culvert."

推荐答案

首先，你需要使用 width ，而不是 max-width ;如果实际渲染的大小小于这个值，那就可以了，你只需要换一些宽度值。但是由于它的显示类型，因此标签不起作用。这是一些最简单的解决方案：

First of all, you need to use width, not max-width; if the actual rendered size is less than this value, it's all right, you only need to wrap by some width value. But with the label it won't work, because of its display type. This is a couple of the simplest possible solutions:

label { width: 10em; display: block; }

或者

or

label { width: 200px; display: inline-block; }

如果您需要标签在标记元素的一侧，最好使用 inline-block 。为了真正精确控制标签和其他元素的相对位置，您还可以使用表格布局样式，并将 display 属性的这些值用作 table ， table-cell 等。



如需了解更多详情，请参阅：

http://www.w3.org/TR/css-display -3 [ ^ ]，

http://www.w3.org/wiki/CSS/Properties/display [ ^ ]。

-SA

If you need the label to be on the side of the labelled element, you should better use inline-block. For really fine control of relative positions of labels and other elements, you can also use table layout styles, with the use of such values for the display property as table, table-cell and the like.

For further detail, please see:
http://www.w3.org/TR/css-display-3[^],
http://www.w3.org/wiki/CSS/Properties/display[^].

—SA

感谢Sergey;



虽然我不能完全使用他的解决方案，因为它影响了所有的标签（当然），他的想法的推导起作用：



CSS

.wrappedlabel {width：320px;显示：块; }



HTML

< label class =wrappedlabel> 注意：如果旅行者选择包括个人旅行，则仅根据旅行的业务部分记录时间/日期。提供个人旅行的解释。< / label>

Thanks to Sergey;

Although I couldn't quite use his solution, because it affected all the labels (naturally), this derivation of his idea works:

CSS
.wrappedlabel { width: 320px; display: block; }

HTML
<label class="wrappedlabel">Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>

这篇关于如何将标签限制在某个最大宽度并将其包裹在该长度之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！